Cool and Touch-Enabled Photo Carousel With jQuery and GSAP

How to make use of it:

1. Add image containers to the photo carousel.

<div class="container">
  <div class="ring">
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
  </div>
</div>

2. Determine the place of the picture carousel.

.container {
  perspective: 2000px;
  width: 300px;
  height: 400px;  
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

3. Load the mandatory jQuery (or Zepto.js) and GSAP libraries within the doc.

<script src="/path/to/cdn/gsap.min.js"></script>
<script src="/path/to/cdn/jquery.slim.min.js"></script>

4. The most important GSAP script to allow the picture carousel.

let xPos = 0;
gsap.timeline()
    .set('.ring', { rotationY:180, cursor:'grab' }) //set initial rotationY so the parallax jump happens off screen
    .set('.img',  { // apply transform rotations to each image
      rotateY: (i)=> i*-36,
      transformOrigin: '50% 50% 500px',
      z: -500,
      backgroundImage:(i)=>'url(https://picsum.photos/id/'+(i+32)+'/600/400/)',
      backgroundPosition:(i)=>getBgPos(i),
      backfaceVisibility:'hidden'
    })    
    .from('.img', {
      duration:1.5,
      y:200,
      opacity:0,
      stagger:0.1,
      ease:'expo'
    })
    .add(()=>{
      $('.img').on('mouseenter', (e)=>{
        let current = e.currentTarget;
        gsap.to('.img', {opacity:(i,t)=>(t==current)? 1:0.5, ease:'power3'})
      })
      $('.img').on('mouseleave', (e)=>{
        gsap.to('.img', {opacity:1, ease:'power2.inOut'})
      })
    }, '-=0.5')

5. Enable touch to assist utilizing jQuery occasions.

$(window).on('mousedown touchstart', dragStart);
$(window).on('mouseup touchend', dragEnd);
function dragStart(e){ 
  if (e.touches) e.clientX = e.touches[0].clientX;
  xPos = Math.round(e.clientX);
  gsap.set('.ring', {cursor:'grabbing'})
  $(window).on('mousemove touchmove', drag);
}
function drag(e){
  if (e.touches) e.clientX = e.touches[0].clientX;    
  gsap.to('.ring', {
    rotationY: '-=' +( (Math.round(e.clientX)-xPos)%360 ),
    onUp<a href="https://www.jqueryscript.net/time-clock/">date</a>:()=>{ gsap.set('.img', { backgroundPosition:(i)=>getBgPos(i) }) }
  });
  xPos = Math.round(e.clientX);
}
function dragEnd(e){
  $(window).off('mousemove touchmove', drag);
  gsap.set('.ring', {cursor:'grab'});
}
function getBgPos(i){ //returns the background-position string to create parallax movement in each image
  return ( 100-gsap.utils.wrap(0,360,gsap.getProperty('.ring', 'rotationY')-180-i*36)/360*500 )+'px 0px';
}

3D Parallax Photo Carousel With jQuery And GSAP Plugin/Github, gsap slider animation, glider 3d photo slider, jquery image slider code

See Demo And Download