如何使用自舉指示器作爲滑動圖像

Question

我想創建一個引導滑塊。我想使用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>