Question

我正在使用swiper.js。我希望始终将新的/活动幻灯片滚动到顶部，因此当新幻灯片进入视口时，内容必须滚动到顶部。

我有一个小提琴：https://jsfiddle.net/p406sfe4/8/

我虽然这个脚本可能会完成我需要的东西，但它似乎不起作用：

swiper.on('slideChangeEnd', function(s) {
    s.slides.each(function() {
    if ($(this).index() !== s.activeIndex) $(this)[0].scrollTop = 0
   });
});

谢谢！

Answer 1

除非您限制容器/幻灯片的高度 - 导致溢出 - 否则可滚动内容实际上不会在每张幻灯片中。在这种情况下，您应该关注swiper容器或其他父元素的scrollTop属性。

无论您要滚动到什么内容，如果添加到初始化配置，事件都会更好。要使用jsfiddle中的代码：

var swiper = new Swiper('.swiper-container', {
  pagination: '.swiper-pagination',
  paginationClickable: true,
  nextButton: '.swiper-button-next',
  prevButton: '.swiper-button-prev',
  spaceBetween: 30,
  hashnav: true,
  autoHeight: true,

  // attach callback here
  onSlideChangeEnd: function (swiperObj) {
    $('.swiper-container').css('scrollTop', '0');
  }
});

Answer 2

嗯，以上答案对我没有用。将此答案添加到其他方案中。

在我的情况下，我在同一页面上有多个带有不同包装器ID的swiper，并且正在参照其ID初始化Swiper，

在有多个swiper实例的情况下，我无法到达滑块的正确位置，所以我不得不这样做。

    var SwiperItems= [];
    $('.swiper-items-wrapper').each(function(i) {
        var this_ID = $(this).attr('id');
        SwiperItems[i] = new Swiper( '#' + this_ID + ' .swiper-contrainer', {
            loop: true,
            navigation: {
                nextEl: '#' + this_ID + ' .swiper-button-next-outsite',
                prevEl: '#' + this_ID + ' .swiper-button-prev-outsite',
            },
            autoHeight: true,
        });
        SwiperItems[i].on('slideChange', function (swiperObj) {
            $('html, body').animate({
                scrollTop: jQuery(SwiperItems[i].$el).offset().top
            }, 1000);
        );
    });

始终将滑动条滑动到顶部

2 个答案: