13

私のウェブサイトにフクロウのカルーセルを使用しようとしています。たとえば、ナビゲーションに「無効な」クラスを追加して、css で無効にするなど、最初/最後の項目に到達した後にナビゲーションを無効にします。出来ますか？

私のコード

$(document).ready(function() {
  var owl = $("#owl-demo");
  owl.owlCarousel({
    rewindNav : false,	
    pagination : false,        
    items : 4
  });
  // Custom Navigation Events
  $(".next").click(function(){
    owl.trigger('owl.next');
  })
  $(".prev").click(function(){
    owl.trigger('owl.prev');
  })
});
.item { background: #e5e5e5; margin: 10px}
.btn { background: #bd0000; color: #fff; padding: 5px 10px; cursor: pointer}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js"></script>
<link href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css" rel="stylesheet" />

<div id="owl-demo" class="owl-carousel owl-theme">
  <div class="item"><h1>1</h1></div>
  <div class="item"><h1>2</h1></div>
  <div class="item"><h1>3</h1></div>
  <div class="item"><h1>4</h1></div>
  <div class="item"><h1>5</h1></div>
  <div class="item"><h1>6</h1></div>
  <div class="item"><h1>7</h1></div>
  <div class="item"><h1>8</h1></div>
  <div class="item"><h1>9</h1></div>
  <div class="item"><h1>10</h1></div>
</div>

<div class="customNavigation">
  <a class="btn prev">Previous</a>
  <a class="btn next">Next</a>
</div>

http://jsfiddle.net/p3d52z4n/1/

4

9 に答える 9

15

callbak afterAction とカスタム コントロールを使用できます

afterAction: function(){
  if ( this.itemsAmount > this.visibleItems.length ) {
    $('.next').show();
    $('.prev').show();

    $('.next').removeClass('disabled');
    $('.prev').removeClass('disabled');
    if ( this.currentItem == 0 ) {
      $('.prev').addClass('disabled');
    }
    if ( this.currentItem == this.maximumItem ) {
      $('.next').addClass('disabled');
    }

  } else {
    $('.next').hide();
    $('.prev').hide();
  }
}

実際のデモを確認してください - http://jsfiddle.net/p3d52z4n/9/

于 2015-01-19T15:23:24.790 に答える
3

Owl Carousel 2、My solution - スライダーを呼び出した後、ネイティブ ナビゲーション ボタンで同じ問題が発生しました。

             var elm = '.slider'; //your slider class
             function toggleArrows(){ 
                if($(elm).find(".owl-item").last().hasClass('active') && 
                   $(elm).find(".owl-item.active").index() == $(elm).find(".owl-item").first().index()){                       
                    $(elm).find('.owl-nav .owl-next').addClass("off");
                    $(elm).find('.owl-nav .owl-prev').addClass("off"); 
                }
                //disable next
                else if($(elm).find(".owl-item").last().hasClass('active')){
                    $(elm).find('.owl-nav .owl-next').addClass("off");
                    $(elm).find('.owl-nav .owl-prev').removeClass("off"); 
                }
                //disable previus
                else if($(elm).find(".owl-item.active").index() == $(elm).find(".owl-item").first().index()) {
                    $(elm).find('.owl-nav .owl-next').removeClass("off"); 
                    $(elm).find('.owl-nav .owl-prev').addClass("off");
                }
                else{
                    $(elm).find('.owl-nav .owl-next,.owl-nav .owl-prev').removeClass("off");  
                }
            }

            //turn off buttons if last or first - after change
            $(elm).on('initialized.owl.carousel', function (event) {
                toggleArrows();
            });
             $(elm).on('translated.owl.carousel', function (event) { toggleArrows(); });

cssについては、無効なボタンに必要なプロパティをクラス「オフ」に指定します。

于 2015-05-13T18:56:53.327 に答える
2

Owl Carousel 2 を使用して動作しています

$('#owlCarousel').owlCarousel({
            loop:true,
            loop:false,
            responsiveClass:true,            
            responsive:{
                0:{
                    items:1,
                    nav:true
                },
                600:{
                    items:3,
                    nav:true
                },
                1000:{
                    items:4,
                    nav:true,                    
                    touchDrag:false,
                    //pullDrag:false,
                    freeDrag:false
                }                
            },
            onTranslated:callBack
        });
        function callBack(){
          if($('.owl-carousel .owl-item').last().hasClass('active')){
                $('.owl-next').hide();
                $('.owl-prev').show(); 
                console.log('true');
             }else if($('.owl-carousel .owl-item').first().hasClass('active')){
                $('.owl-prev').hide(); 
                $('.owl-next').show();
                console.log('false');
             }
        }
        $('#owlCarousel .owl-prev').hide();
于 2016-12-08T10:25:34.040 に答える