Question

使用iDangerous Swiper如何定位和隐藏第一张幻灯片的.left-arrow类？文档中有这个 - mySwiper.getFirstSlide（） - 返回第一个滑块幻灯片（幻灯片实例），但是如何指示在此幻灯片上隐藏左箭头？

js并不方便，但我尝试过这样的事情没有成功：

mySwiper.getFirstSlide({
  $(this).find('.left-arrow').hide(),
});

var firstSlide = mySwiper.getFirstSlide();
firstSlide.find('.left-arrow').hide();

这可能需要是条件语句 - 如果它是第一张幻灯片，则隐藏左箭头，否则显示它。我只是不确定如何设置类似的东西。任何帮助表示赞赏。感谢。

http://codepen.io/NewbCake/pen/sIbxi

Answer 1

这比你想象的容易得多，特别是如果你对JS不方便，考虑到你可以用纯CSS解决这个问题。

Swiper将一个名为“.swiper-button-disabled”的CSS类分配给第一个和最后一个箭头，以确保swiper不再移动。试试这个：

.left-arrow.swiper-button-disabled {opacity: 0;}

Answer 2

var howManySlides = $('.swiper-wrapper .swiper-slide').length - 1;
$(".arrow-left").addClass('hide');
var mySwiper = new Swiper('.swiper-container',{
    loop:false,
    onSlideChangeStart: function(){
        $(".tabs .arrow-left,.tabs .arrow-left").removeClass('hide');
        if(tabsSwiper.activeIndex === 0) {
            $(".tabs .arrow-left").addClass('hide');
        }
        if(tabsSwiper.activeIndex === howManySlides) {
            $(".tabs .arrow-right").addClass('hide');
        }
    }
})

Answer 3

尝试这样的事情，如果我理解正确的问题，它可能会按你的意愿运作：

  var mySwiper = new Swiper('.swiper-container',{
    loop:false,

  })
  $('.arrow-left').on('click', function(e){
    e.preventDefault()
     $('.arrow-right').hide();
    setTimeout(function(){
       $('.arrow-right').show();
    },3000);
    mySwiper.swipePrev();
  });
  $('.arrow-right').on('click', function(e){
    e.preventDefault()
    $('.arrow-left').hide();
    setTimeout(function(){
       $('.arrow-left').show();
    },3000);
    mySwiper.swipeNext();
  });

Answer 4

For ionic
In controller assigned to ion-content containing ion-slides
add slider to scope:

 $scope.$on("$ionicSlides.sliderInitialized", function (event, data) {
            // data.slider is the instance of Swiper
            $scope.mySlider = data.slider;
        });

add hiding/inactivating css class like:

.inactive-my-button {
    pointer-events: none;
    opacity: 0.4;
}

apply class on buttons with proper condition - here my buttons placed in footer just after </ion-slides>

<ion-footer-bar >
    <div class="buttons" 
         ng-click="mySlider.slidePrev()" 
         ng-class="{'inactive-my-button': (mySlider.activeIndex == 0)}">
        <div class="swiper-button-prev"></div>
    </div>
    <h1 class="title"></h1>
    <div class="buttons" 
         ng-click="mySlider.slideNext()" 
         ng-class="{'inactive-my-button': (mySlider.activeIndex == mySlider.slides.length-1)}">
        <div class="swiper-button-next"></div>
    </div>
</ion-footer-bar>

iDangerous Swiper - 隐藏第一张和最后一张幻灯片的导航箭头

4 个答案: