在加载时无法在引导转盘中隐藏左箭头

Question

我无法在加载时隐藏左箭头，并在用户前进到第二张幻灯片时显示。右箭头可正常工作，但隐藏在最终幻灯片中。当我将左箭头设置为在加载时隐藏时，当用户单击回到第一张幻灯片时，箭头仍然可见。

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

问题是在你的第一个项目之前有一个h6标记，并且它被认为是第一个孩子，所以你的测试curSlide.is( ':first-child' )永远不会运行。所以你可以使用css3 nth-child（2）来引用第一个项目的第二个孩子：https://jsfiddle.net/gusvb4zt/2/

Answer 2

您不必返回此功能。您还需要在加载时运行该功能。

＆＃13;

＆＃13;

$('.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()

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;