Press "Enter" to skip to content

Cool and Touch-Enabled Photo Carousel With jQuery and GSAP

Parallax Photo Carousel is a cool, touch-enabled photo circle that rotates through a group of photos along a 3D ring, with a subtle parallax effect while in motion.

gsap image hover effect, jquery image slider with text animation, gsap image effects, jquery 3d carousel slider free download, greensock image carousel

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

Official Website(gvrban): Click Here

This superior jQuery/javascript plugin is developed by creativeocean. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.