Draggable Carousel with Slidebar using Angular

[saibat]

Hello everybody
I would like to create a Carousel slider which should show the current item enlarged with a short description. (picture below)
The whole thing should be draggable and if the user is inactive it should run in a loop. 
In addition, there should be a scrollbar at the end with which you can move the carousel. 
I have not worked with gsap very often, but I was recommended to do something like that with gsap. 
Does anyone have an idea how to create something like that?
Thank you very much

[ZachSaucier]

Hey saibat and welcome to the GreenSock forums! 

 

I recommend that you start with our "Getting Started" article:

 

Then I recommend that you modify an existing carousel using GSAP to fit your needs. Maybe start with this? You could search for others as well.

Unfortunately we don't have the capacity to make every project that people post about in the forums. But we're happy to help you if you get stuck somewhere! Just let us know.

[saibat]

Hello Zach Saucier
Thank you for your answer.
I tried to incorporate the Sahil slider into my Angular project.

The slider works but if I drag a slide and I want to go to the next position it does not slide to the next slide automatically.

Another problem is that if i change the position of the slidebar the slider does not change.

Does anyone know what the problem is?

 

Here is my code:

 

.html

<div class="controls">

    <div id="prev" (click)="prevElement()">prev</div>

    <div id="next" (click)="nextElement()">next</div>

  </div>

  <div id="container">

    <div id="slider">

      <div class="slide one sliderItem">1</div>

      <div class="slide one sliderItem">2</div>

      <div class="slide one sliderItem">3</div>

      <div class="slide one sliderItem">4</div>

      <div class="slide one sliderItem">5</div>

      <div class="slide one sliderItem">6</div>

      <div class="slide one sliderItem">7</div>

    </div>

  </div>

  <div #scrubber id="scrubber">

    <div #handle id="handle"></div>

  </div>

 

.scss

  #container {

    position: relative;

    height: 50vh;

    width: 80vw;

    background-color: #111;

    border-radius: 10px;

    box-sizing: border-box;

    overflow: hidden;

    margin: 20px auto;

    display: flex;

  }

  

  #slider {

    display: block;

    position: relative;

    box-sizing: border-box;

    height: 100%;

    display: flex;

  }

  

  .slide {

    display: flex;

    position: relative;

    height: 100%;

    background-color: #c80000;

    border-radius: 10px;

    border: solid 1px #aaa;

    float: left;

    box-sizing: border-box;

    justify-content: center;

    align-content: center;

    align-items: center;

    font-size: 40px;

    color: white;

    background-size: cover;

    background-position: center center;

  }

  

  #progress {

    display: block;

    position: relative;

    height: 1px;

    width: 60%;

    background-color: #fff;

    margin: 0 auto;

  }

  

  .controls{

    display: flex;

    overflow: hidden;

    justify-content: center;

    padding: 50px 0 0 0;

  }

  

  .controls div{

    display: flex;

    position: relative;

    float: left;

    text-transform: lowercase;

    background-color: #5923a5;

    margin: 0 20px;

    padding: 5px 20px 10px;

    color: #aaa;

    font-size: 17px;

    font-family: inherit;

    border: none;

  }

  

  #scrubber{

    display: block;

    position: relative;

    width: 80vw;

    height: 10px;

    border: solid 1px #aaa;

    margin: 0 auto;

    overflow: hidden;  

  }

  

  #handle{

    display: block;

    position: relative;

    width: 100px;

    height: 100%;

    background: #5923a5;

  }

 

.ts

import { Component, OnInit, Inject } from '@angular/core';

import { gsap, TweenMax } from 'gsap';

import { Draggable } from 'gsap/Draggable';

import { DOCUMENT } from '@angular/common';

 

@Component({

  selector: 'product-slider',

  templateUrl: './product-slider.component.html',

  styleUrls: ['./product-slider.component.scss']

})

export class ProductSliderComponent implements OnInit {

  slides: any;

  container: any;

  slider: any;

  scrubber: any;

  handle: any;

 

  slideCount: any;

 

  boxWidth: any;

  sliderWidth: any;

  targetX = 0;

  lastTarget = 0;

  draggable: any;

 

  ratio: any;

 

  ratioX: any;

 

  constructor(@Inject(DOCUMENT) private _document) { }

 

  ngOnInit(): void {

    gsap.registerPlugin(Draggable);

  }

 

  ngAfterViewInit() {

 

    this.slides = this._document.querySelectorAll('.sliderItem');

    this.container = this._document.querySelector('#container');

    this.slider = this._document.querySelector('#slider');

    this.scrubber = this._document.querySelector('#scrubber');

    this.handle = this._document.querySelector('#handle');

    

 

    this.slideCount = this._document.getElementsByClassName('sliderItem').length;

 

    this.boxWidth = this.container.offsetWidth;

    this.sliderWidth = this.boxWidth * this.slideCount;

 

    console.log("slides");

    console.log(this.slider);

 

    for(var i = 0; i < this.slides.length; i++){

      this.slides[i].style.width = this.boxWidth + "px";

    }

 

    this.slider.style.width = this.sliderWidth;

 

    Draggable.create(this.slider, {

      type: "x",

      edgeResistance: 0.6,

      bounds: "#container",

      throwProps: true,

      onDrag: this.setProgess,

      onThrowUpdate: this.setProgess,

    });

 

    this.initScrollBar();

 

  }

 

  setProgess() {

    var x = gsap.getProperty("#slider", "x");

 

    this.targetX = Math.round((x as number) / this.boxWidth);

    this.targetX =

      this.targetX < -1 * (this.slideCount - 1) ? -1 * (this.slideCount - 1) : this.targetX;

 

    gsap.set(this.scrubber, { x: -this.ratioX * this.ratio });

    this.lastTarget = this.targetX;

 

  }

 

  prevElement() {

    if (this.targetX < 0) {

      this.targetX++;

 

      TweenMax.to(this.slider, 1, {

        x: this.boxWidth * this.targetX,

        onUpdate: this.setProgess

      });

    }

  }

 

  nextElement() {

    if (this.targetX > -1 * (this.slideCount - 1)) {

      this.targetX--;

 

      TweenMax.to(this.slider, 1, {

        x: this.boxWidth * this.targetX,

        onUpdate: this.setProgess

      });

    }

  }

 

  initScrollBar() {

 

    //Select width of the scrubber

    var scrubWidth = this.scrubber.getBoundingClientRect().width;

 

    // Use scrubWidth to calculate handleWidth and use handleWidth wherever needed to keep your slides snap correctly, handleWidth depends on number of slides

    var handleWidth = scrubWidth / this.slideCount;

 

    // ratio to calculate x translate

    this.ratio = scrubWidth / this.sliderWidth;

 

    gsap.set(this.handle, { width: handleWidth });

 

    var self = this;

 

    Draggable.create(this.handle, {

      type: "x",

      //Calculate minX and maxX to set bounds

      //bounds: { minX: 0, maxX: 5 },

      throwProps: true,

      snap: {

        x: function (value) {

          self.ratioX = Math.round(value / handleWidth) * handleWidth;

          return self.ratioX;

        }

      },

      onDrag: this.updateSlides,

      onThrowUpdate: this.updateSlides

    });

  }

 

  updateSlides() {

    // Set the position of slider by calculating ratio

    //this.slider = document.querySelector('#slider');

    gsap.set(this.slider, { x: -this.ratioX / this.ratio });

  }

 

}

[ZachSaucier]

@saibat Again, please make a minimal demo if you'd like help debugging your project. Please only include the relevant code and use something like CodePen to exemplify the issue.