OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Center slides while hovering

  • Thread starter Thread starter AleSparano
  • Start date Start date
A

AleSparano

Guest
I create this slider, all works fine, but the last slide, that has a width without hover, when start the hover animation goes out of the viewport and it can't display properly.

I want that when start the hover animation the slide show properly, even moving the slides before it. Short story, i'll try to achieve the slider of the prime video website.

https://codepen.io/Alessandro-Sparano/pen/zYQRmma here the link to the codepen, that shows how its is now.

Code:
const swiper2 = new Swiper('#swiper-superimprese', {
      // Optional parameters
      slidesPerView:1,
      spaceBetween:20,
      breakpoints:{
        768:{
          slidesPerView:2,
          spaceBetween:20
        },
        1024:{
          slidesPerView:"auto",
          spaceBetween:20,
          slidesPerGroup:4,
        },
        1280:{
          slidesPerView:"auto",
          spaceBetween:20,
          slidesPerGroup:4,
        },
        1535:{
          slidesPerView:"auto",
          spaceBetween:20,
          slidesPerGroup:5,
        }
      },
      direction: 'horizontal',
      loop: false,
      grabCursor:true,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },

      // If we need pagination      
      // Navigation arrows
      // And if we need scrollbar
    });
  
let expanders = gsap.utils.toArray("#swiper-superimprese .swiper-slide");
    let expanderWidth;

    expanders.forEach(function(expander, index){
      
      expanderWidth = expander.offsetWidth;
      containerSuper = expander.querySelector(".container-absolute-superimprese");
      titoloSlide = expander.querySelector(".titolo-slide-superimprese");
      containerInfo = expander.querySelector(".container-more-info");
      video = expander.querySelectorAll(".video-superimprese")

      let animation = gsap.timeline({paused:true});

      animation.to(containerSuper,.1, {display:"block"});
      animation.add('syncAnimSlide');
      animation.to (expander, {width:expanderWidth*2, duration:.5, ease:"sine.out"}, 'syncAnimSlide');
      animation.to(containerSuper,.1, {autoAlpha:1, duration:.5, ease:"sine.out"}, 'syncAnimSlide');
      animation.from(titoloSlide, {autoAlpha:0,yPercent:25,duration:.5, delay:.3, ease:"sine.out"},'syncAnimSlide');
      animation.from(containerInfo, {autoAlpha:0,yPercent:25,duration:.5, delay:.4, ease:"sine.out"},'syncAnimSlide');
      animation.to(video, {autoAlpha:1, duration:.5, ease:"sine.out"}, 'syncAnimSlide');
     
      
      expander.addEventListener("mouseenter", function() {
        animation.play();
      });
      
      expander.addEventListener("mouseleave", function(event) {
        animation.reverse(.3,false);
      });
    });

<p>I create this slider, all works fine, but the last slide, that has a width without hover, when start the hover animation goes out of the viewport and it can't display properly.</p>
<p>I want that when start the hover animation the slide show properly, even moving the slides before it. Short story, i'll try to achieve the slider of the prime video website.</p>
<p><a href="https://codepen.io/Alessandro-Sparano/pen/zYQRmma" rel="nofollow noreferrer">https://codepen.io/Alessandro-Sparano/pen/zYQRmma</a> here the link to the codepen, that shows how its is now.</p>
<pre><code>const swiper2 = new Swiper('#swiper-superimprese', {
// Optional parameters
slidesPerView:1,
spaceBetween:20,
breakpoints:{
768:{
slidesPerView:2,
spaceBetween:20
},
1024:{
slidesPerView:"auto",
spaceBetween:20,
slidesPerGroup:4,
},
1280:{
slidesPerView:"auto",
spaceBetween:20,
slidesPerGroup:4,
},
1535:{
slidesPerView:"auto",
spaceBetween:20,
slidesPerGroup:5,
}
},
direction: 'horizontal',
loop: false,
grabCursor:true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},

// If we need pagination
// Navigation arrows
// And if we need scrollbar
});

let expanders = gsap.utils.toArray("#swiper-superimprese .swiper-slide");
let expanderWidth;

expanders.forEach(function(expander, index){

expanderWidth = expander.offsetWidth;
containerSuper = expander.querySelector(".container-absolute-superimprese");
titoloSlide = expander.querySelector(".titolo-slide-superimprese");
containerInfo = expander.querySelector(".container-more-info");
video = expander.querySelectorAll(".video-superimprese")

let animation = gsap.timeline({paused:true});

animation.to(containerSuper,.1, {display:"block"});
animation.add('syncAnimSlide');
animation.to (expander, {width:expanderWidth*2, duration:.5, ease:"sine.out"}, 'syncAnimSlide');
animation.to(containerSuper,.1, {autoAlpha:1, duration:.5, ease:"sine.out"}, 'syncAnimSlide');
animation.from(titoloSlide, {autoAlpha:0,yPercent:25,duration:.5, delay:.3, ease:"sine.out"},'syncAnimSlide');
animation.from(containerInfo, {autoAlpha:0,yPercent:25,duration:.5, delay:.4, ease:"sine.out"},'syncAnimSlide');
animation.to(video, {autoAlpha:1, duration:.5, ease:"sine.out"}, 'syncAnimSlide');


expander.addEventListener("mouseenter", function() {
animation.play();
});

expander.addEventListener("mouseleave", function(event) {
animation.reverse(.3,false);
});
});
</code></pre>
 

Latest posts

Top