Hide next and previous button in last and first content

Question

Hide next and previous button in last and first content

Navigation

#1 by (1 votes)

1

I'm using a carousel with bootstrap, but I need the next button to add when the last item arrives and the previous button is hidden while in the first content. My code is not working, but I do not identify the problem, so I'll put it down.

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 carousel previous next

asked by anonymous 13.06.2018 / 20:08

1 answer

Recover customer orders 1. Duplication ERROR Transparent lines with CSS

score 1 · Answer 1

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

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

I also set the JavaScript to pick up the right elements by hiding / displaying the arrows as desired:

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