Carousel Twitter BootStrap最後と最初のアイテムの前のボタンまたは次のボタンを隠す方法

Question

最初のアイテムの前のボタンを隠し、最後のアイテムのカルーセルがあるときは右ボタンを隠す必要があります。 私は他の同じ質問があると知っていますが、誰かが助けて私に説明することができれば、本当にcound'tを作って、カルーセルブートストラップの仕組みを説明してください。本当に感謝しています。あなたのCSSにこれを追加http://codepen.io/hafsadanguir/pen/ZONxvV

(function($) { 

    $(document).ready(function() { 
    $('#myCarousel').carousel({ 
     pause: true, 
     interval: false 
    }); 

    $(".prev-slide").click(function(){ 
     $("#myCarousel").carousel('prev'); 
    }); 
    $(".next-slide").click(function(){ 
     $("#myCarousel").carousel('next'); 
    }); 


    var clickEvent = false; 
    $('#myCarousel').on('click', '.nav a', function() { 
      clickEvent = true; 
      $('.nav li').removeClass('active'); 
      $(this).parent().addClass('active'); 
    }).on('slid.bs.carousel', function(e) { 
     if(!clickEvent) { 
      var count = $('.nav li').length -1; 
      var current = $('.nav li.active'); 
      current.removeClass('active').next().addClass('active'); 
      var id = parseInt(current.data('slide-to')) +1; 
      if(count+1 == id) { 
       $('.nav li').first().addClass('active'); 
      } 
     } 
    }); 

    }); 

})(jQuery); 

Answer 1

：

.carousel-control { 
    display: none; 
} 

Answer 2

はHTMLだけで見てここ

は、それがtabedスライダーだ私のスライダーです。

あなたのhtmlファイルでctrl + fを実行してください。

次に入力してください。次のクラスとそれ以前のクラスが表示されます。 ただ削除してください。

Answer 3

1. コントロールの表示プロパティをthe .css() methodで変更できます。

2. the slid.bs.carousel eventを使用して矢印を非表示にします。アイテムがこの時点で.activeクラスを持っている場合は、アイテムがアクティブになったばかりであることを意味します。

   このイベントは、カルーセルのスライド遷移が完了すると発生します。

3. the slide.bs.carousel eventを矢印を使用してください。アイテムが現時点で.activeクラスを持っている場合、アイテムが現在非アクティブになっていることを意味します。

   このイベントは、スライドインスタンスメソッドが呼び出されるとすぐに発生します。

結果を確認してください。それはあなたが達成したいものですか？

http://codepen.io/glebkema/pen/EgawBK

var myCarousel = $('#myCarousel'); 
 
var itemFirst = myCarousel.find('.carousel-inner > .item:first-child'); 
 
var itemLast  = myCarousel.find('.carousel-inner > .item:last-child'); 
 
var controlLeft = myCarousel.find('a.left.carousel-control'); 
 
var controlRight = myCarousel.find('a.right.carousel-control'); 
 

 
hideControl(); 
 

 
myCarousel.on('slid.bs.carousel', function() { 
 
    hideControl(); 
 
}); 
 
myCarousel.on('slide.bs.carousel', function() { 
 
    showControl(); 
 
}); 
 

 
function hideControl() { 
 
    if (itemFirst.hasClass('active')) { 
 
    controlLeft.css('display', 'none'); 
 
    } 
 
    if (itemLast.hasClass('active')) { 
 
    controlRight.css('display', 'none'); 
 
    myCarousel.carousel('pause'); // stop from cycling through items 
 
    } 
 
} 
 

 
function showControl() { 
 
    if (itemFirst.hasClass('active')) { 
 
    controlLeft.css('display', 'block'); 
 
    } 
 
    if (itemLast.hasClass('active')) { 
 
    controlRight.css('display', 'block'); 
 
    } 
 
}

/* Make the images wide and responsive. */ 
 
.carousel-inner img { 
 
    height: auto; 
 
    width: 100%; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 
    <ol class="carousel-indicators"> 
 
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
 
    <li data-target="#myCarousel" data-slide-to="1"></li> 
 
    <li data-target="#myCarousel" data-slide-to="2"></li> 
 
    </ol> 
 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="item active"> 
 
     <img src="//placehold.it/900x300/c69/f9c/?text=Only%20Forward" alt=""> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="//placehold.it/900x300/9c6/cf9/?text=Both%20Directions" alt=""> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="//placehold.it/900x300/69c/9cf/?text=Only%20Back" alt=""> 
 
    </div> 
 
    </div> 
 
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a> 
 
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>