html 光滑的滑块视差

Posted 2021-05-10

<style>
.slick-slide {
  z-index: 1;
  position: relative;
}
.z9 {
  z-index: 9 !important;
}
.trans-left {
  transition: all 1200ms;
  transform: translateX(-30%);
}
.trans-right {
  transition: all 1200ms;
  transform: translateX(30%);
}
</style>

<scirpt>
slider.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
    var slide = $(this).find('.slick-current');
    var sideL  = slide.prev();
    var sideR  = slide.next();
    var next  = $(this).find('[data-slick-index="' + nextSlide + '"]');

    if (currentSlide > nextSlide) { // going left
        slide.addClass('trans-left');            
    } else { // going right
        console.log("right");
        slide.addClass('trans-right');
    }
});

slider.on('afterChange', function(event, slick, currentSlide) {
    $(this).find('.slick-slide').removeClass('trans-right trans-left');
    var slide = $(this).find('.slick-current');
    var sideL  = slide.prev();
    var sideR  = slide.next();
    slide.removeClass('z9');
    sideR.addClass('z9');
    sideL.addClass('z9');
});
</scirpt>