How to hide the next and Previous button in the last and first contents of Carousel?

Asked

Viewed 485 times

1

I’m using a Carousel with Bootstrap, but I need that button next disappear when the last item arrives and that button Previous stay hidden while in the first content.

My code is not working, but I do not identify the problem, so I will put 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>
javascript twitter-bootstrap carousel

1 answer

2

The structure of your Carousel is incorrect. Carousel will only work if you have the structure as reported in documentation.

Some selectors are incorrect too, others are missing etc.. if you list everything here, it will get huge. Better see in the corrected code below and compare with your code.

I also adjusted Javascript to get the right elements hiding/showing the arrows as you wish:

$('#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>

  • Thanks for the help, it worked here, but I had to modify the css a lot to work with the layout of the site I’m doing, recommend it to someone who see this article, use css without linking and delete everything useless that the bootstrap brings because it greatly harms the project in the legacy category.

  • Yeah, that’s why I don’t use the BS.

  • then but it was the only one in which I found this code for my goal, I do not know too much in javascript background to create one from scratch, otherwise it would not be necessary to resort to bootstrap

  • You want to do only 1 slider? There are mt plugin JS for this, nor need the BS.

  • Yes, in the case of this site that I am doing only this Carousel will have this system, I have researched mtos sites and documentation and the only one I found was in bootstrap if you have other greatly thank you

Browser other questions tagged javascript twitter-bootstrap carousel

You are not signed in. Login or sign up in order to post.