Question

我正在使用bootstrap作为我正在帮助的网站的框架。在网站的头版是一个旋转木马。由于某些奇怪的原因，当点击左箭头（上一个）时，旋转木马“滑动”过渡非常平滑;然而，点击右箭头（NEXT）似乎很奇怪我试过在线以及引导程序文件（CSS和JS）我似乎找不到任何东西。我已经尝试从bootstrap网站重新复制代码以获取轮播。不确定是什么问题。

网址：www.acebac.org

帮助？：d

Answer 1

这是JQuery代码：

   var $item = $('.carousel .item');
    var $wHeight = $(window).height();
    $item.eq(0).addClass('active');
    $item.height($wHeight);
    $item.addClass('full-screen');

    $('.carousel img').each(function() {
        var $src = $(this).attr('src');
        var $color = $(this).attr('data-color');
        $(this).parent().css({
            'background-image' : 'url(' + $src + ')',
            'background-color' : $color
        });
        $(this).remove();
    });

    $(window).on('resize', function (){
        $wHeight = $(window).height();
        $item.height($wHeight);
    });

    $('.carousel').carousel({
        interval: 5000,
        pause: "false"
    });

HTML code：

      <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" role="listbox">
              <div class="item">
                  <img src="img/bg.jpg" data-color="lightblue" alt="First Image">
                  <div class="carousel-caption">
                      <h3>First Image</h3>
                  </div>
              </div>
              <div class="item">
                  <img src="img/bg1.jpg" data-color="firebrick" alt="Second Image">
                  <div class="carousel-caption">
                      <h3>Second Image</h3>
                  </div>
              </div>
              <div class="item">
                  <img src="img/bg2.jpg" data-color="violet" alt="Third Image">
                  <div class="carousel-caption">
                      <h3>Third Image</h3>
                  </div>
              </div>
          </div>

          <!-- Controls -->
          <a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev">
              <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#mycarousel" role="button" data-slide="next">
              <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
          </a>
      </div>

请参阅演示：Demo Carousel Bootstrap

Bootstrap Carousel幻灯片对于“NEXT”不顺畅，但对于“PREVIOUS”来说是平滑的

1 个答案: