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

【问题标题】：iDangerous Swiper - hide navigation arrows from first and last slideiDangerous Swiper - 隐藏第一张和最后一张幻灯片的导航箭头
【发布时间】：2014-01-31 09:58:19
【问题描述】：

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

【问题讨论】：

标签： jquery navigation slider hide

【解决方案1】：

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

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

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

【讨论】：

显然它只是从 3.0 开始。

【解决方案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');
        }
    }
})

【讨论】：

【解决方案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();
  });

【讨论】：

嗨。感谢您的回复。抱歉，我可能还没有完全清楚。我试图总是只在第一张幻灯片上隐藏左箭头。以及仅在最后一张幻灯片上的隐藏右箭头。中间的所有幻灯片都应该有两个箭头。
啊，好的，现在我明白了.. 两秒 :)
运气好吗？如果数组中的幻灯片等于 0，那么解决此问题的方法是获取幻灯片的长度然后隐藏左箭头幻灯片吗？

【解决方案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>

【讨论】：