javascript - Bootstrap 无限轮播(循环)多元素

Question

我正在为我的元素创建证明，我只想显示 3 个面部指示器并在单击时保持隐藏 左右控制它应该通过替换第 3 个面部指示器出现，自动播放也是如此，

任何对新手有用的建议

谢谢

JSFiddle

<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