Versteckte Pfeiltaste im Bootstrap-Karussell kann nicht geladen werden

Question

Ich kann den linken Pfeil nicht beim Laden verbergen und anzeigen, wenn der Benutzer zur zweiten Folie fortgeschritten ist. Der Pfeil nach rechts funktioniert korrekt und verbirgt sich auf der letzten Folie. Wenn ich den Linkspfeil zum Ausblenden beim Laden einstelle, ist der Pfeil immer noch sichtbar, wenn der Benutzer auf die erste Folie klickt.

HTML

<div class="container"> 
<div class="carousel slide" id="myCarousel"> 
<div class="quote-carousel"> 
    <div class="carousel-inner"> 
    <h6>What customers say about us</h6> 
    <div class="item active"> 
     <ul class="thumbnails"> 
     <li class="col-xs-12 col-sm-12 slide-content"> 
      <!-- <div> --> 
      <h3>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do tempor incididunt ut labore et dolore magna aliqua, ipsum dolor amet."</h3> 
       <span class="time">-User</span> 
      <!-- </div> --> 
     </li> 
     </ul> 
    </div><!-- /Slide1 --> 

    <div class="item"> 
     <ul class="thumbnails"> 
     <li class="col-xs-12 col-sm-12 slide-content"> 
      <!-- <div> --> 
      <h3>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do tempor incididunt ut labore et dolore magna aliqua, ipsum dolor amet."</h3> 
       <span class="time">-User</span> 
      <!-- </div> --> 
     </li> 
     </ul> 
    </div><!-- /Slide1 --> 

    <div class="item"> 
     <ul class="thumbnails"> 
     <li class="col-xs-12 col-sm-12 slide-content"> 
      <!-- <div> --> 
      <h3>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do tempor incididunt ut labore et dolore magna aliqua, ipsum dolor amet."</h3> 
       <span class="time">-User</span> 
      <!-- </div> --> 
     </li> 
     </ul> 
    </div><!-- /Slide1 --> 


    </div> 

    <!-- Controls --> 
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
     <i class="material-icons">&#xE314;</i> 
    </a> 
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
     <i class="material-icons">&#xE315;</i> 
    </a> 

</div> 
</div> 
</div> 

jQuery

$('.carousel').carousel({ 
    wrap: false 
}).on('slid.bs.carousel', function() { 
    curSlide = $('.active'); 
    if(curSlide.is(':first-child')) { 
    $('.left').hide(); 
    return; 
    } else { 
    $('.left').show(); 
    } 
    if (curSlide.is(':last-child')) { 
    $('.right').hide(); 
    return; 
    } else { 
    $('.right').show(); 
    } 
}); 

JSFIDDLE: https://jsfiddle.net/gusvb4zt/1/

Answer 1

das Problem ist, dass es eine h6 Tag vor dem ersten Element und das wird betrachtet als die f Erstes Kind, also wird Ihr Test curSlide.is(':first-child') nie laufen. So können Sie das css3 nth-child (2) verwenden, um auf das zweite untergeordnete Element zu verweisen: https://jsfiddle.net/gusvb4zt/2/

Answer 2

Sie müssen die Funktion nicht zurückgeben. Außerdem müssen Sie die Funktion beim Laden ausführen.

$('.carousel').carousel({ 
 
    wrap: false 
 
}).on('slid.bs.carousel', function() { 
 
    check() 
 

 
}); 
 

 
function check() { 
 
    curSlide = $('.active'); 
 
    if (curSlide.is(':first-child')) { 
 
    $('.left').hide(); 
 
    $('.right').show(); 
 
    } else if (curSlide.is(':last-child')) { 
 
    $('.right').hide(); 
 
    $('.left').show(); 
 
    } else { 
 
    $('.left').show(); 
 
    $('.right').show(); 
 
    } 
 
} 
 
check()

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <div class="carousel slide" id="myCarousel"> 
 
    <div class="quote-carousel"> 
 
     <div class="carousel-inner"> 
 

 
     <div class="item active"> 
 
      <ul class="thumbnails"> 
 
      <li class="col-xs-12 col-sm-12 slide-content"> 
 
       <!-- <div> --> 
 
       <h3>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do tempor incididunt ut labore et dolore magna aliqua, ipsum dolor amet."</h3> 
 
       <span class="time">-User</span> 
 
       <!-- </div> --> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     <!-- /Slide1 --> 
 

 
     <div class="item"> 
 
      <ul class="thumbnails"> 
 
      <li class="col-xs-12 col-sm-12 slide-content"> 
 
       <!-- <div> --> 
 
       <h3>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do tempor incididunt ut labore et dolore magna aliqua, ipsum dolor amet."</h3> 
 
       <span class="time">-Robyn Estroff</span> 
 
       <!-- </div> --> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     <!-- /Slide1 --> 
 

 
     <div class="item"> 
 
      <ul class="thumbnails"> 
 
      <li class="col-xs-12 col-sm-12 slide-content"> 
 
       <!-- <div> --> 
 
       <h3>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do tempor incididunt ut labore et dolore magna aliqua, ipsum dolor amet."</h3> 
 
       <span class="time">-Robyn Estroff</span> 
 
       <!-- </div> --> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     <!-- /Slide1 --> 
 

 

 
     </div> 
 

 
     <!-- Controls --> 
 
     <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
 
     <i class="material-icons">&#xE314;</i> 
 
     </a> 
 
     <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
 
     <i class="material-icons">&#xE315;</i> 
 
     </a> 
 

 
    </div> 
 
    </div> 
 
</div>