Bootstrap无限传送带（循环）multi-Item

我正在创建Testimonial对于我的项目，我只想显示3个人脸指示器和剩余的隐藏点击左和右控制它应该出现通过替换第三个人脸指示器和自动相同玩，Bootstrap无限传送带（循环）multi-Item

为新手任何建议将是有益

感谢

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

来源

2017-09-02 babu harry

巴布嗨，我不是很确定你想实现什么，但我备齐下列各项： - 隐藏控件和显示控件时，第一/最后一张幻灯片是活动的？或 - 完全隐藏控件？ –

感谢您的回复，不完全在那里你可以看到三个脸部指标，我想要两个，但它应该在隐藏完成第三个第四，然后第五个必须来，对不起解释希望你有我的观点[链接]（https://bootsnipp.com/snippets/featured/infinite-carousel-loop） –

你想要这样吗？

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

来源

2017-09-02 06:46:44 vel

yeaa非常棒非常感谢，我还有更多的帮助告诉我你是怎么做到的？ –

我已经在我的一个项目中进行了这方面的推荐 – vel

Bootstrap无限传送带（循环）multi-Item

回答

相关问题