滚动 swiperjs 时更改幻灯片

时间:2021-07-09 19:48:25

标签: html frontend css-animations swiperjs wow.js

我在我的一个项目中使用了 swiperjs!我希望在滚动时更改幻灯片! 另外,我希望 wow.js 动画仅在幻灯片处于活动状态时才起作用。 我附上了我的 JS 代码,其中我已经初始化了我的 swiper js!

任何形式的帮助都会非常感激,谢谢!

const swiper = new Swiper(".swiper-container", {
    slidesPerView: 1,
    direction: getDirection(),
    mousewheel: true,
    effect: "fade",
    speed: 500,
    autoHeight: false,
    grabCursor: true,

    pagination: {
      el: ".swiper-pagination",
      clickable: true
    },
    on: {
        resize: function () {
            swiper.changeDirection(getDirection());
      },
      slideChange: getCurrentSlide,
    },
    scrollbar: {
        el: '.swiper-scrollbar',
    },
    
    coverflowEffect: {
        rotate: 100,
        slideShadows: true,
    },
});


function getDirection() {
    var windowWidth = window.innerWidth;
    var direction = window.innerWidth >= 767 ? "vertical" : "horizontal";

    return direction;
}

0 个答案:

没有答案