[英]Bootstrap Infinite carousel (loop) multi-Item
i am creating Testimonial For my project, I want to show only 3 Face indicators and remaining hide on click Left and right Control it should appear by replacing 3rd Face indicator and same goes for auto play, 我正在创建个人鉴定对于我的项目,我只想显示3个面部指示符,并在单击鼠标左键和右键时保持隐藏状态。通过替换3rd面部指示符可以显示它,并且自动播放也是如此
Any Suggestions for newbie it would be useful 对新手的任何建议都会有用
Thanks 谢谢
<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>
Do you want like this? 你要这样吗
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"});
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.