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

Question

如何让嵌套的水平滑块与 show/hiding 的点击控件一起使用。

我正在使用 Swiper which I have almost working except if you click / transition into the nested slider, you can't go back from that first slide without first transition one slide. If you click all the way to the end and back, it works perfectly. There are many callbacks in the 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 和此处：

清理了 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')) {
    $('.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();
  },
 });
});

编辑2：

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

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。

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

Nested horizontal sliders with click controls

javascript

jquery

swiper