Question

我正在创建推荐书对于我的项目，我想只显示3个面部指示器并保持点击左右控制它应该通过替换第三个面部指示器显示，同样适用于自动播放，

任何有关新手的建议都会很有用

由于

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="carousel slide" data-ride="carousel" id="quote-carousel">
                <!-- Carousel Slides / Quotes -->
                <div class="carousel-inner text-center">
                    <!-- Quote 1 -->
                    <div class="item active">
                        <blockquote>
                            <div class="row">
                                <div class="col-sm-8 col-sm-offset-2">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,ore et dolore magna aliqua. Ut eni !</p>
                                </div>
                            </div>
                        </blockquote>
                    </div>
                    <!-- Quote 2 -->
                    <div class="item">
                        <blockquote>
                            <div class="row">
                                <div class="col-sm-8 col-sm-offset-2">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,ore et dolore magna aliqua. Ut eni !</p>
                                </div>
                            </div>
                        </blockquote>
                    </div>
                    <!-- Quote 3 -->
                    <div class="item">
                        <blockquote>
                            <div class="row">
                                <div class="col-sm-8 col-sm-offset-2">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,ore et dolore magna aliqua. Ut eni !</p>
                                </div>
                            </div>
                        </blockquote>
                    </div>
                </div>
                <!-- Bottom Carousel Indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#quote-carousel" data-slide-to="0" class="active"><img class="img-responsive " src="https://s3.amazonaws.com/uifaces/faces/twitter/mantia/128.jpg" alt="">
                    </li>
                    <li data-target="#quote-carousel" data-slide-to="1"><img class="img-responsive" src="https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg" alt="">
                    </li>
                    <li data-target="#quote-carousel" data-slide-to="2"><img class="img-responsive" src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="">
                    </li>
                </ol>
                <!-- Carousel Buttons Next/Prev -->
               <a data-slide="prev" href="#quote-carousel" class="left carousel-control"><i class="fa fa-chevron-left"></i></a>
                <a data-slide="next" href="#quote-carousel" class="right carousel-control"><i class="fa fa-chevron-right"></i></a>
            </div>
        </div>
    </div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script>
$(document).ready(function() {
    //carousel options
    $('#quote-carousel').carousel({
        pause: true,
        interval: 20000,
    });
});
</script>

Answer 1

你想这样吗？

jQuery("#quote-carousel").on('slide.bs.carousel', function (event, fromIndex, toIndex) {

    var active  =   jQuery(event.target).find('.carousel-inner > .item.active');
    var from    =   active.index();
    var next    =   jQuery(event.relatedTarget);
    var to_slide=   next.index();

    if (to_slide>2) {
        var hide_slide = parseInt(to_slide) - 3;
        jQuery('.carousel-indicators li[data-slide-to="'+to_slide+'"]').css({"display":"inline-block"});
        jQuery('.carousel-indicators li[data-slide-to="'+hide_slide+'"]').css({"display":"none"});
    } else{
        var hide_slide = parseInt(to_slide) + 3;
        jQuery('.carousel-indicators li[data-slide-to="'+to_slide+'"]').css({"display":"inline-block"});
        jQuery('.carousel-indicators li[data-slide-to="'+hide_slide+'"]').css({"display":"none"});
    } 
});

fiddle link

Bootstrap Infinite carousel（循环）多项

1 个答案: