如何使用引导指示器作为滑动图像 [关闭]

Question

我想创建一个 Bootstrap 滑块。我想为我的客户推荐部分使用 Bootstrap Carousel。我希望轮播的指示器随着图像滑动，例如www.desk.com。

我不确定如何使指标随着每个客户在活动指标上的推荐而滑动。

我的 Javascript 很弱，所以请帮助我。谢谢

Answer 1

尝试类似的方法或更好地使用slick slider.

DEMO

添加此项以启用自动滑动

$(function(){
    $('.carousel').carousel({
      interval: 2000
    });
});

// thumbnails.carousel.js jQuery plugin
;
(function(window, $, undefined) {

  var conf = {
    center: true,
    backgroundControl: false
  };

  var cache = {
    $carouselContainer: $('.thumbnails-carousel').parent(),
    $thumbnailsLi: $('.thumbnails-carousel li'),
    $controls: $('.thumbnails-carousel').parent().find('.carousel-control')
  };

  function init() {
    cache.$carouselContainer.find('ol.carousel-indicators').addClass('indicators-fix');
    cache.$thumbnailsLi.first().addClass('active-thumbnail');

    if (!conf.backgroundControl) {
      cache.$carouselContainer.find('.carousel-control').addClass('controls-background-reset');
    } else {
      cache.$controls.height(cache.$carouselContainer.find('.carousel-inner').height());
    }

    if (conf.center) {
      cache.$thumbnailsLi.wrapAll("<div class='center clearfix'></div>");
    }
  }

  function refreshOpacities(domEl) {
    cache.$thumbnailsLi.removeClass('active-thumbnail');
    cache.$thumbnailsLi.eq($(domEl).index()).addClass('active-thumbnail');
  }

  function bindUiActions() {
    cache.$carouselContainer.on('slide.bs.carousel', function(e) {
      refreshOpacities(e.relatedTarget);
    });

    cache.$thumbnailsLi.click(function() {
      cache.$carouselContainer.carousel($(this).index());
    });
  }

  $.fn.thumbnailsCarousel = function(options) {
    conf = $.extend(conf, options);

    init();
    bindUiActions();

    return this;
  }

})(window, jQuery);

$('.thumbnails-carousel').thumbnailsCarousel();

$(function(){
    $('.carousel').carousel({
      interval: 2000
    });
});

/*         Just for demo     */

body {
  padding: 10px;
  text-align: center;
}
#carousel-example-generic {
  display: inline-block;
}
/*****************************/

/* Plugin styles */

ul.thumbnails-carousel {
  padding: 5px 0 0 0;
  margin: 0;
  list-style-type: none;
  text-align: center;
}
ul.thumbnails-carousel .center {
  display: inline-block;
}
ul.thumbnails-carousel li {
  margin-right: 5px;
  float: left;
  cursor: pointer;
}
.controls-background-reset {
  background: none !important;
}
.active-thumbnail {
  opacity: 0.4;
}
.indicators-fix {
  bottom: 70px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- bootstrap carousel -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">

    <div class="item active srle">
      <img src="http://s28.postimg.org/4237b0cjh/image.jpg" alt="1.jpg" class="img-responsive">
      <div class="carousel-caption">
        <p>1.jpg</p>
      </div>
    </div>

    <div class="item">
      <img src="http://s29.postimg.org/xaf064313/image.jpg" alt="2.jpg" class="img-responsive">
      <div class="carousel-caption">
        <p>2.jpg</p>
      </div>
    </div>

    <div class="item">
      <img src="http://s17.postimg.org/sv1x15jlb/image.jpg" alt="3.jpg" class="img-responsive">
      <div class="carousel-caption">
        <p>3.jpg</p>
      </div>
    </div>

    <div class="item">
      <img src="http://s7.postimg.org/4z602gd8b/image.jpg" alt="4.jpg" class="img-responsive">
      <div class="carousel-caption">
        <p>4.jpg</p>
      </div>
    </div>

  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>

  <!-- Thumbnails -->
  <ul class="thumbnails-carousel clearfix">
    <li>
      <img src="http://s2.postimg.org/h6uti3zud/1_tn.jpg" alt="1_tn.jpg">
    </li>
    <li>
      <img src="http://s27.postimg.org/n4fjr7q2n/2_tn.jpg" alt="1_tn.jpg">
    </li>
    <li>
      <img src="http://s29.postimg.org/afuhmf61f/3_tn.jpg" alt="1_tn.jpg">
    </li>
    <li>
      <img src="http://s29.postimg.org/p45dxi6hf/4_tn.jpg" alt="1_tn.jpg">
    </li>
  </ul>
</div>