Bootstrap Carousel 幻灯片“NEXT”不平滑，但“PREVIOUS”平滑答案

【问题标题】：Bootstrap Carousel slide is not smooth for "NEXT" but smooth for "PREVIOUS"Bootstrap Carousel 幻灯片“NEXT”不平滑，但“PREVIOUS”平滑
【发布时间】：2016-09-26 22:39:05
【问题描述】：

我正在使用引导程序作为我正在帮助的网站的框架。在网站的首页是一个轮播。出于某种奇怪的原因，单击左箭头（上一个）时，轮播“幻灯片”过渡非常平滑；但是，单击右箭头（NEXT）时似乎变得很奇怪我试过在网上以及引导文件（CSS和JS）中查找我似乎找不到任何东西。我尝试从引导网站重新复制代码以获取轮播。不知道怎么回事。

网址：www.acebac.org

帮助？ :D

【问题讨论】：

最好将代码发布在问题中。

标签： javascript html css twitter-bootstrap carousel

【解决方案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 代码：

      <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

【讨论】：