当第一次和最后一次处于活动状态时禁用左右控制

Question

如何在第一个项目处于活动状态时禁用左侧控制，如果最后一个项目处于活动状态则同样转到右侧然后禁用右侧控制

如果我得到任何建议，我将不胜感激，是否有任何替代方案 谢谢

JsFiddle Here

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

Answer 1

您可以使用slid.bs.carousel bootstrap 事件来做到这一点

1.显示或隐藏控件

jQuery("#quote-carousel").on('slid.bs.carousel', function () {

    //Show or Hide left indicator 
    if($(this).find('li:first-child').hasClass('active')){
        $(this).find('.left').hide();
    }else{
        $(this).find('.left').show();
    }

    //Show or Hide right indicator 
    if($(this).find('li:last').hasClass('active')){
        $(this).find('.right').hide();
    }else{
        $(this).find('.right').show();
    }
}).trigger('slid.bs.carousel');

2。用于禁用控件

您可以使用 CSS pointer-events 禁用它。 完整代码见这里https://jsfiddle.net/n4v63g3L/6/