Carousel Twitter BootStrap how to hide the previous or next button at the last and first Item

Question

I need to hide the previous button on the first item, and hide the right button when the carousel on the last item. I know there is other same questions as mine but I really really cound't make it work, if someone can help and explain to me how it works for caroussel bootstrap i'll be really gratefull Thanks in advance for your help.

Here is my slider it's a tabed slider : 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. You can change the display property of a control by the .css() method.

2. Use the slid.bs.carousel event to hide an arrow. If an item has the .active class at this point, it means that the item has just become active.

   This event is fired when the carousel has completed its slide transition.

3. Use the slide.bs.carousel event to show an arrow. If an item has the .active class at this moment, it means that the item becomes inactive right now.

   This event fires immediately when the slide instance method is invoked.

Please check the result. Is it what you want to achieve?

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

Just look in the html.

Do ctrl + f on your html file.

And type in next or previous. You will see the next and previous classes stand. Just remove them.

Answer 3

Add this to your css:

.carousel-control {
  display: none;
}