个人数据间隔bootstrap轮播4 [英] individual data intervals bootstrap carousel 4
本文介绍了个人数据间隔bootstrap轮播4的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想为我的bootstrap 4轮播上的每张幻灯片设置一个单独的数据间隔。我已经尝试了一些其他的javascript片段，但它们似乎不适用于我的代码，例如 Bootstrap 4 Carousel-stack overflow
I want to set an individual data interval for each slide on my bootstrap 4 carousel. I have tried a few other snippets of javascript, however they don't seem to work with my code, such as Bootstrap 4 Carousel-stack overflow
任何人都可以提出建议，感谢任何帮助。
Could anyone please suggest something, any help is appreciated.
#top-bootstrap-slider{
width: 80%;
margin: auto;
background: rgb(15,36,62);
color: white;
height: 30px;
margin-top: 0;
overflow: hidden;
font-size: 10px;
}
.carousel-item{
display: flex;
align-items: center;
height: 100%;
line-height: 3vw;
text-align: center;
width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div id="top-bootstrap-slider" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
Testimonial 1
</div>
<div class="carousel-item">
Testimonial 2
</div>
<div class="carousel-item">
Testimonial 3
</div>
</div>
</div>
推荐答案
<我根据Zim的答案做了一个实现： Bootstrap 4 Carousel：每个幻灯片上的单独数据间隔，除了旋转木马的起点（即第一张幻灯片在第一次迭代时使用默认间隔）外，它工作正常。要使用此扩展，您必须将 data-interval 属性添加到每个 carousel-item 设置上毫秒间隔。检查下一个示例：
I have made an implementation based on the Zim's answers from this: Bootstrap 4 Carousel: Individual data-interval on each slide, and it is working good, except for the start point of the carousel (i.e. the first slide uses the default interval on the first iteration). For use this extension, you have to add the data-interval attribute to each carousel-item setting on it the milliseconds of the interval. Check next example:
$(document).ready(function()
{
// Extend the Bootstrap carousel implementation.
$.fn.carousel.Constructor.prototype.cycle = function (event)
{
if (!event)
this._isPaused = false;
if (this._interval)
{
clearInterval(this._interval);
this._interval = null;
}
if (this._config.interval && !this._isPaused)
{
var item = $('.carousel-item-next');
var newInterval = item.data('interval') || this._config.interval;
this._interval = setInterval(
(document.visibilityState ? this.nextWhenVisible : this.next).bind(this),
newInterval
);
}
};
});
#top-bootstrap-slider{
width: 80%;
margin: auto;
background: rgb(15,36,62);
color: white;
height: 30px;
margin-top: 0;
overflow: hidden;
font-size: 10px;
}
.carousel-item{
display: flex;
align-items: center;
height: 100%;
line-height: 3vw;
text-align: center;
width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div id="top-bootstrap-slider" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-interval="1000">
Testimonial 1
</div>
<div class="carousel-item" data-interval="2000">
Testimonial 2
</div>
<div class="carousel-item" data-interval="5000">
Testimonial 3
</div>
</div>
</div>
或者，在如果上一个不起作用，您可以将代码包装在< script> 和< / script> 中包含 Bootstrap 文件后的标签，如下所示：
Alternatively, in case the previous don't work, you can wrap the code inside <script> and </script> tags after the including of the Bootstrap files, like this:
#top-bootstrap-slider{
width: 80%;
margin: auto;
background: rgb(15,36,62);
color: white;
height: 30px;
margin-top: 0;
overflow: hidden;
font-size: 10px;
}
.carousel-item{
display: flex;
align-items: center;
height: 100%;
line-height: 3vw;
text-align: center;
width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script>
$.fn.carousel.Constructor.prototype.cycle = function (event)
{
if (!event)
this._isPaused = false;
if (this._interval)
{
clearInterval(this._interval);
this._interval = null;
}
if (this._config.interval && !this._isPaused)
{
var item = $('.carousel-item-next');
var newInterval = item.data('interval') || this._config.interval;
this._interval = setInterval(
(document.visibilityState ? this.nextWhenVisible : this.next).bind(this),
newInterval
);
}
};
</script>
<div id="top-bootstrap-slider" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-interval="1000">
Testimonial 1
</div>
<div class="carousel-item" data-interval="2000">
Testimonial 2
</div>
<div class="carousel-item" data-interval="5000">
Testimonial 3
</div>
</div>
</div>
支持多个轮播的更新
下一个示例显示了如何正确实施支持多个轮播。基本上我们需要在选择项时使用下一行：
The next example shows how to do a correct implementation for support multiple carousels. Basically we need to use next line when selecting the item:
var item = $(this._element).find('.carousel-item-next');
#top-bootstrap-slider{
width: 80%;
margin: auto;
background: rgb(15,36,62);
color: white;
height: 30px;
margin-top: 0;
overflow: hidden;
font-size: 10px;
}
#top-bootstrap-slider2{
width: 80%;
margin: auto;
background: skyblue;
color: white;
height: 50px;
margin-top: 25px;
overflow: hidden;
font-size: 14px;
}
.carousel-item{
display: flex;
align-items: center;
height: 100%;
line-height: 3vw;
text-align: center;
width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script>
$.fn.carousel.Constructor.prototype.cycle = function (event)
{
if (!event)
this._isPaused = false;
if (this._interval)
{
clearInterval(this._interval);
this._interval = null;
}
if (this._config.interval && !this._isPaused)
{
// This next line does the trick.
var item = $(this._element).find('.carousel-item-next');
var newInterval = item.data('interval') || this._config.interval;
this._interval = setInterval(
(document.visibilityState ? this.nextWhenVisible : this.next).bind(this),
newInterval
);
}
};
</script>
<div id="top-bootstrap-slider" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-interval="1000">
Testimonial 1
</div>
<div class="carousel-item" data-interval="2000">
Testimonial 2
</div>
<div class="carousel-item" data-interval="5000">
Testimonial 3
</div>
</div>
</div>
<div id="top-bootstrap-slider2" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-interval="3000">
Testimonial 4
</div>
<div class="carousel-item" data-interval="1000">
Testimonial 5
</div>
<div class="carousel-item" data-interval="1000">
Testimonial 6
</div>
</div>
</div>
这篇关于个人数据间隔bootstrap轮播4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
