Question

我有一个基于http://www.eyecon.ro/bootstrap-slider/的bootstrap数据滑块和一个bootstrap轮播。当拖动开始时，我希望旋转木马转到特定的幻灯片。为此，我改编了这个.carousel（数字）修复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>

任何想法？非常感谢提前。

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

Twitter的Bootstrap 2.x数据滑块调用.carousel（数字）不起作用

1 个答案: