Question

我需要隐藏第一个项目上的上一个按钮，并在最后一个项目上的轮播时隐藏右键。我知道还有其他同样的问题，但我真的不能让它工作，如果有人可以帮助并向我解释它对于caroussel bootstrap是如何工作的，我将非常感激，并提前感谢您的帮助。

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

您可以按the .css() method更改控件的显示属性。
使用the slid.bs.carousel event隐藏箭头。如果一个项目此时具有.active类，则表示该项目刚刚变为活动状态。

当轮播完成幻灯片转换时会触发此事件。
使用the slide.bs.carousel event显示箭头。如果此时项目具有.active类，则表示该项目现在变为非活动状态。

调用幻灯片实例方法时会立即触发此事件。

请检查结果。这是你想要实现的目标吗？

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

＆＃13;

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');
  }
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

将此添加到您的css：

.carousel-control {
  display: none;
}

Answer 3

请查看html。

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

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

Carousel Twitter BootStrap如何隐藏最后一个项目的上一个或下一个按钮

3 个答案: