Question

如何通过显示/隐藏它们来获得嵌套的水平滑块以使用单击控件。

我正在使用Swiper我几乎正在工作，除非你点击/转换到嵌套滑块，你不能在没有第一张幻灯片的情况下从第一张幻灯片返回。如果你一直点击到最后和最后，它完美地工作。 Swiper api中有许多回调可用。

到目前为止我的进展：Nested slider Fiddle

$(document).ready(function() {

  var swiperH = new Swiper('.swiper-container-h', {
    pagination: '.swiper-pagination-h',
    paginationClickable: true,
    spaceBetween: 0,
    nextButton: '.h-next',
    prevButton: '.h-prev',
    onSlideChangeStart: function() {
      if ($('.swiper-container-h .swiper-slide-active').children().hasClass('swiper-container-v')) {
        console.log('nested');
        $('.h-prev, .h-next').hide();
      } else {
        console.log('notnested');
        $('.h-prev, .h-next').show();
      }
    },
    onReachBeginning: function() {},
    onReachEnd: function() {}
  });

  var swiperV = new Swiper('.swiper-container-v', {
    pagination: '.swiper-pagination-v',
    paginationClickable: true,
    direction: 'horizontal',
    spaceBetween: 0,
    nextButton: '.v-next',
    prevButton: '.v-prev',
    nested: true,
    onReachBeginning: function() {
      $('.h-prev').show();
    },
    onReachEnd: function() {
      $('.h-next').show();
    },
    onSlideChangeStart: function(slides) {
      if (slides.activeIndex === 1) {
        console.log('slide 2');
      }
    }
  });

});

编辑：

使用@TheOnlyError回答here并在此处清理小提琴：

$(document).ready(function() {

var swiperH = new Swiper('.swiper-container-h', {
pagination: '.swiper-pagination-h',
paginationClickable: true,
spaceBetween: 0,
nextButton: '.h-next',
prevButton: '.h-prev',
onSlideChangeStart: function() {
  if ($('.swiper-container-h .swiper-slide-active').children().hasClass('swiper-container-v')) {
    $('.h-prev, .h-next').hide();
  } else {
    $('.h-prev, .h-next').show();
  }
},
onSlideNextStart: function() {
  $('.h-prev').show();
}
});

var swiperV = new Swiper('.swiper-container-v', {
  pagination: '.swiper-pagination-v', 
  paginationClickable: true,
  direction: 'horizontal',
  spaceBetween: 0,
  nextButton: '.v-next',
  prevButton: '.v-prev',
  nested: true,
  onReachBeginning: function() {
    $('.h-prev').show();
  },
  onReachEnd: function() {
    $('.h-next').show();
  },
 });
});

EDIT2：

刚刚遇到如果第一张幻灯片是嵌套的，这不起作用。要解决这个问题，您还需要添加：

onInit: function(){
        if ($('.swiper-container-h .swiper-slide-active').children().hasClass('swiper-container-h-inner')) {
            $('.prev, .next').hide();
        }
},

到第一个滑块：Fiddle

Answer 1

问题是Swiper无法检测到单独的Swiper对象之间的过渡。解决方案是检查何时从第一个水平滑块滑到下一张幻灯片，以显示上一个按钮。

所以将此函数添加到您的第一个Swiper对象：

onSlideNextStart: function(swiper) {
  $('.h-prev').show();
}

检查the fiddle。

带有点击控件的嵌套水平滑块

1 个答案: