0

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

滑块:

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

有任何想法吗?提前非常感谢。

4

1 回答 1

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);
});
于 2013-06-06T12:50:39.810 回答