2013-06-06 18 views
0

我有一個基於http://www.eyecon.ro/bootstrap-slider/和引導程序傳送帶的引導數據滑塊。當拖動開始時,我想旋轉木馬去特定的幻燈片。爲此,我已經適應了這個.carousel(數字)解決Twitter Bootsrap Carousel .carousel(number) not working,但它不工作:(Twitter的Bootstrap 2.x數據滑塊調用.carousel(數量)不起作用

滑塊:

<div class="well"> 
<form id="carousel-nav"> 
<input type="text" href="#my-carousel" data-to="2" class="slider" data-slider- selection="after"> 
</form> 
</div> 

的JavaScript:

<script> 
$(function() { 

$('.slider').slider(); 

});</script> 


<script> 
$('#carousel-nav input').click(function(q){ 
q.preventDefault(); 
targetSlide = $(this).attr('data-to')-1; 
$('#my-carousel').carousel(targetSlide); 
}); 
</script> 

任何想法非常感謝提前

+0

你能後的旋轉木馬的代碼嗎?什麼不工作?什麼都沒有發生,或者傳送帶移動到錯誤的幻燈片? – ZimSystem

回答

0

HTML

<div class="container"> 

<input id="dp5" type="text" class="span2" value="" data-slider-min="1" data-slider-max="3" data-slider-step="1" data-slider-value="1" data-slider-orientation="horizontal" data-slider-selection="none" data-slider-tooltip="show"> 


    <div id="myCarousel" class="carousel slide"> 
    <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> 
    <!-- Carousel items --> 
    <div class="carousel-inner"> 
    <div class="active item">1</div> 
    <div class="item">2</div> 
    <div class="item">3</div> 
    </div> 
    <!-- Carousel nav --> 
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 
    </div> 
</div> 

的JavaScript

$('#myCarousel').carousel('pause'); 
$('#dp5').slider() 
.on('slideStop', function(ev){ 
$('#myCarousel').carousel($('#dp5').val()-1); 
}); 

/* also set the slider when the carousel moves */ 

$('#myCarousel') 
.on('slid', function(e){ 
$('#dp5').slider('setValue', $(".active", e.target).index()+1); 
});