How to hide the next and previous button in the last and first carousel content?

Question

How to hide the next and previous button in the last and first carousel content?

I'm using a Bootstrap Carousel, but I need the button next to sum up when the last item arrives and the button previous to be hidden while in the first content.

My code isn't working, but I don't identify the problem, so I'll put it below.

HTML

<div id="myCarousel" class="carousel slide" data-ride="carousel">
        <img src="img/ft-carousel-home.jpg" width="430" height="308">
      <!-- Indicators -->
      <div class="control">
          <a class="left carousel-control" href="#myCarousel" data-slide="prev">previous</a>              
          <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>
          <a class="right carousel-control" href="#myCarousel" data-slide="next">next</a>
      </div>
    
      <!-- Wrapper for slides -->
      <div class="carousel-inner">
        <div class="item active">
          <div class="carousel-caption">
            <h3>Estudo revela percepções sobre o cultivo da cana 1</h3>
                    <p>Avaliar sob a ótica de moradores locais os efeitos ambientais, econômicos e sociais após dez anos da chegada da cultura</p>
          </div>
        </div>
    
        <div class="item">
          <div class="carousel-caption">
            <h3>Estudo revela percepções sobre o cultivo da cana 2</h3>
                    <p>Avaliar sob a ótica de moradores locais os efeitos ambientais, econômicos e sociais após dez anos da chegada da cultura</p>
          </div>
        </div>
    
        <div class="item">
          <div class="carousel-caption">
            <h3>Estudo revela percepções sobre o cultivo da cana 1</h3>
                    <p>Avaliar sob a ótica de moradores locais os efeitos ambientais, econômicos e sociais após dez anos da chegada da cultura</p>
          </div>
        </div>
      </div>
    
      <!-- Left and right controls -->
      
    </div>

JAVASCRIPT

<script>
    $('#slider').carousel({
        interval: false,
    })
    
    $(document).ready(function () {               // on document ready
        checkitem();
    });
    
    $('#myCarousel').on('slid.bs.carousel', checkitem);
    
    function checkitem()                        // check function
    {
        var $this = $('#myCarousel');
        if ($('.carousel-inner .item:first').hasClass('active')) {
            // Hide left arrow
            $this.children('.left.carousel-control').hide();
            // But show right arrow
            $this.children('.right.carousel-control').show();
        } else if ($('.carousel-inner .item:last').hasClass('active')) {
            // Hide right arrow
            $this.children('.right.carousel-control').hide();
            // But show left arrow
            $this.children('.left.carousel-control').show();
        } else {
            $this.children('.carousel-control').show();
        }
    }
</script>

1

javascript carousel twitter-bootstrap

Author: Rafael Tavares, 2018-06-13

Source

1 answers

score 2 · Answer 1

Your carousel structure is incorrect. The Carousel will only work if it has the structure as told in the documentation.

Some selectors are incorrect too, others missing etc.. if you list everything here, it's going to be huge. Better to see in the code below fixed and compare with your code.

I also set the JavaScript to get the elements right hiding / showing the arrows as per want:

$('#myCarousel').carousel({
     interval: false,
 })

 $(document).ready(function () {               // on document ready
     checkitem();
 });

 $('#myCarousel').on('slid.bs.carousel', checkitem);

 function checkitem()                        // check function
 {
     var $this = $('#myCarousel');
     if ($('.carousel-inner .carousel-item:first').hasClass('active')) {
         // Hide left arrow
         $('.carousel-control-prev', $this).hide();
         // But show right arrow
         $('.carousel-control-next', $this).show();
     } else if ($('.carousel-inner .carousel-item:last').hasClass('active')) {
         // Hide right arrow
         $('.carousel-control-prev', $this).show();
         // But show left arrow
         $('.carousel-control-next', $this).hide();
     } else {
         $('.carousel-control-prev, .carousel-control-next', $this).show();
     }
 }

img{
   width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<div id="myCarousel" class="carousel slide" data-ride="carousel">
   <!-- Indicators -->
    <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>

   <!-- Wrapper for slides -->
   <div class="carousel-inner">
     <div class="carousel-item active">
     <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" width="430" height="308">
       <div class="carousel-caption d-none d-md-block">
         <h3>Estudo revela percepções sobre o cultivo da cana 1</h3>
                 <p>Avaliar sob a ótica de moradores locais os efeitos ambientais, econômicos e sociais após dez anos da chegada da cultura</p>
       </div>
     </div>

     <div class="carousel-item">
     <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" width="430" height="308">
       <div class="carousel-caption d-none d-md-block">
         <h3>Estudo revela percepções sobre o cultivo da cana 2</h3>
                 <p>Avaliar sob a ótica de moradores locais os efeitos ambientais, econômicos e sociais após dez anos da chegada da cultura</p>
       </div>
     </div>

     <div class="carousel-item">
     <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" width="430" height="308">
       <div class="carousel-caption d-none d-md-block">
         <h3>Estudo revela percepções sobre o cultivo da cana 1</h3>
                 <p>Avaliar sob a ótica de moradores locais os efeitos ambientais, econômicos e sociais após dez anos da chegada da cultura</p>
       </div>
     </div>
   </div>

   <!-- Left and right controls -->
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
 <span class="carousel-control-prev-icon" aria-hidden="true"></span>
 <span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
 <span class="carousel-control-next-icon" aria-hidden="true"></span>
 <span class="sr-only">Next</span>
</a>
 </div>