禁用左，右控制在第一次和最后一次被激活

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引导事件做

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/