iDangeric刀刀 - 第一和最后一个幻灯片中隐藏导航箭头

Question

使用iDangeric 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

ionic
在分配给ion-content的控制器中，包含ion-slides
将滑块添加到范围：

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

添加隐藏/灭活CSS类，例如：

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

将课程应用于适当条件的按钮 - 在这里，我的按钮在</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>