Twitter 的 Bootstrap 2.x 数据滑块调用 .carousel(number) 不起作用答案

【问题标题】：Twitter's Bootstrap 2.x data slider calling .carousel(number) not workingTwitter 的 Bootstrap 2.x 数据滑块调用 .carousel(number) 不起作用
【发布时间】：2013-06-06 09:50:13
【问题描述】：

我有一个基于http://www.eyecon.ro/bootstrap-slider/ 的引导数据滑块和一个引导轮播。当拖动开始时，我希望轮播转到特定幻灯片。为此，我已经调整了这个 .carousel(number) fix Twitter Bootsrap Carousel .carousel(number) not working 但它不起作用:(

滑块：

<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>

有什么想法吗？提前非常感谢。

【问题讨论】：

您也可以发布轮播代码吗？什么不工作？没有任何反应，还是轮播移动到错误的幻灯片？

标签： twitter-bootstrap slider carousel

【解决方案1】：

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);
});

【讨论】：