Carousel Twitter BootStrap 如何在最后一个和第一个 Item 处隐藏上一个或下一个按钮

Question

我需要在第一项上隐藏上一个按钮，在最后一项上轮播时隐藏右键。 我知道还有其他与我相同的问题，但我真的无法让它发挥作用，如果有人可以帮助并向我解释它如何用于旋转木马引导程序，我将非常感激提前感谢您的帮助。

这是我的滑块，它是一个标签式滑块：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

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="https://via.placeholder.com/900x300/c69/f9c/?text=Only%20Forward" alt="">
    </div>
    <div class="item">
      <img src="https://via.placeholder.com/900x300/9c6/cf9/?text=Both%20Directions" alt="">
    </div>
    <div class="item">
      <img src="https://via.placeholder.com/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>

Answer 2

将此添加到您的 CSS：

.carousel-control {
  display: none;
}

Answer 3

只需查看 html。

在您的 html 文件上执行 ctrl + f。

然后输入下一个或上一个。您将看到下一堂课和上一堂课。 只需删除它们。