嵌套水平滑块与单击控件

How do I get a nested horizontal slider to work with click controls by show/hiding them.

如何通过显示/隐藏控件来获得嵌套的水平滑动条。

I'm using 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 available.

我用的是Swiper，它几乎可以工作除非你点击/转换到嵌套的滑动条中，如果没有第一张幻灯片，你不能从第一张幻灯片返回。如果你从头到尾都点击一下，效果会很好。Swiper api中有许多回调。

My progress so far: 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');
      }
    }
  });

});

EDIT:

编辑:

Cleaned up fiddle using @TheOnlyError 's answer here and here:

清除小提琴使用@TheOnlyError这里和这里的答案:

$(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:

Just encountered that if the first slide is nested, this doesn't work. To solve this prob you will also need to add:

如果第一张幻灯片是嵌套的，这就行不通了。要解决这个问题，你还需要加上:

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

to the first slider: Fiddle

到第一个滑块:小提琴

1 个解决方案

#1

The problem is that Swiper won't detect the transition between seperate Swiper objects. The solution would be checking when one has swiped to the next slide from the first horizontal one, to show the previous button.

问题是，Swiper不会检测分离的Swiper对象之间的转换。解决方案是检查一个人何时从第一个水平的幻灯片切换到下一个幻灯片，以显示上一个按钮。

So add this function to your first Swiper object:

因此，将这个函数添加到您的第一个Swiper对象:

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

Check the fiddle.

检查小提琴。

1 个解决方案

#1

更多相关文章

随机推荐