blocks|key|73788|text|只需在包含传送带的div中编写data-interval：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|73789|<div+id="myCarousel"+class="carousel+slide"+data-ride="carousel"+data-interval="500">|code-block|syntax|javascript|73790|取自w3schools的例子。|73791|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_carousel_interval_data&stacked=h^0|9|3|F|D|0|0|2|9|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|D|@$9|11|A|12|1|13]]|E|$]]|$1|M|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

Just write <code>data-interval</code> in the <code>div</code> containing the carousel:

<pre><code>&lt;div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="500"&gt;
</code></pre>

Example taken from <a href="http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_carousel_interval_data&amp;stacked=h" rel="noreferrer">w3schools</a>.

blocks|key|291041|text|您需要在主DIV中将interval设置为data-interval标签。它将工作得很好，您可以为不同的幻灯片分配不同的时间。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|291042|<div+class="carousel"+data-interval="5000">|code-block|syntax|javascript|291043|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You need to set interval in the main DIV as data-interval tag. The it will work fine and you can give different time to different slides.

<pre><code>&lt;div class="carousel" data-interval="5000"&gt;
</code></pre>

blocks|key|73528|text|对于Twitter+Bootstrap+3：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|73529|您必须按照另一个答案中的指定更改CSS转换：|73530|.carousel-inner+>+.item+{
++++position:+relative;
++++display:+none;
++++-webkit-transition:+0.6s+ease-in-out+left;
++++-moz-transition:+0.6s+ease-in-out+left;
++++-o-transition:+0.6s+ease-in-out+left;
++++transition:+0.6s+ease-in-out+left;
}|code-block|syntax|javascript|73531|从0.6秒到1.5秒(例如)。|73532|但也有一些Javascript需要改变。在bootstrap.js中有一行：|73533|.emulateTransitionEnd(600)|73534|应将其更改为相应的毫秒数。因此，在1.5秒内，您会将数字更改为1500：|73535|.emulateTransitionEnd(1500)|73536|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|Y|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|Z|8|@]|9|@]|A|$G|H]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$]]|$1|Q|3|R|5|F|7|11|8|@]|9|@]|A|$G|H]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

For Twitter Bootstrap 3:

You must change the CSS transition as specified in the other answer:

<pre><code>.carousel-inner &gt; .item {
 position: relative;
 display: none;
 -webkit-transition: 0.6s ease-in-out left;
 -moz-transition: 0.6s ease-in-out left;
 -o-transition: 0.6s ease-in-out left;
 transition: 0.6s ease-in-out left;
}
</code></pre>

From 0.6 seconds to 1.5 seconds (for example).

But also, there is some Javascript to change. In the bootstrap.js there is a line:

<pre><code>.emulateTransitionEnd(600)
</code></pre>

This should be changed to the corresponding amount of milliseconds. So for 1.5 seconds you would change the number to 1500:

<pre><code>.emulateTransitionEnd(1500)
</code></pre>

blocks|key|73991|text|对于Bootstrap+4，只需使用以下CSS：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|73992|.carousel+.carousel-item+{
++++transition-duration:+3s;
}|code-block|syntax|javascript|73993|将3s更改为您选择的持续时间。|offset|length|style|CODE|73994|entityMap^0|0|0|1|2|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

With Bootstrap 4, just use this CSS:

<pre><code>.carousel .carousel-item {
 transition-duration: 3s;
}
</code></pre>

Change <code>3s</code> to the duration of your choice.

blocks|key|290872|text|我注意到的一件事是Bootstrap3添加了带有.6s和0.6s的样式。因此，您可能需要像这样显式定义您的转换持续时间(CSS)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|290873|++++.carousel-inner>.item+{
++++-webkit-transition:+0.9s+ease-in-out+left;
++++transition:+0.9s+ease-in-out+left;
++++-webkit-transition:+0.9s,+ease-in-out,+left;
++++-moz-transition:+.9s,+ease-in-out,+left;
++++-o-transition:+.9s,+ease-in-out,+left;
++++transition:+.9s,+ease-in-out,+left;
++++}|code-block|syntax|javascript|290874|entityMap^0|O|3|S|4|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

One thing I noticed is that Bootstrap 3 is adding the styles with both a <code>.6s</code> and <code>0.6s</code>. So you may need to explicitly define your transition duration like this (CSS)

<pre><code> .carousel-inner&gt;.item {
 -webkit-transition: 0.9s ease-in-out left;
 transition: 0.9s ease-in-out left;
 -webkit-transition: 0.9s, ease-in-out, left;
 -moz-transition: .9s, ease-in-out, left;
 -o-transition: .9s, ease-in-out, left;
 transition: .9s, ease-in-out, left;
 }
</code></pre>

blocks|key|73748|text|对于我来说，在我的视图末尾添加了以下内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|73749|<script+type="text/javascript">
$(document).ready(function(){
+++++$("#myCarousel").carousel({
+++++++++interval+:+8000,
+++++++++pause:+false
+++++});
});
</script>|code-block|syntax|javascript|73750|它为旋转木马提供8秒的间隔|73751|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

for me worked to add this at the end of my view:

<pre><code>&lt;script type="text/javascript"&gt;
$(document).ready(function(){
 $("#myCarousel").carousel({
 interval : 8000,
 pause: false
 });
});
&lt;/script&gt;
</code></pre>

it gives to the carousel an interval of 8 seconds

blocks|key|291369|text|不需要任何外部代码，只需使用data-interval=""属性|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|291370|如需更多信息，请访问getbootstrap。|291371|<div+id="carouselExampleCaptions"+class="carousel+slide"+data-ride="carousel"+data-interval="2500">|291372|当您想要更改速度时，请更改"2500“|291373|entityMap|0|LINK|mutability|MUTABLE|url|https://getbootstrap.com/docs/4.0/components/carousel/#options^0|E|G|0|A|C|0|0|0|2R|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|H|3|I|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|13|8|@]|D|@]|E|$]]|$1|L|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|M|$N|$5|O|P|Q|E|$R|S]]]]

no need any external code just use <code>data-interval=&quot;&quot;</code> attribute
more information visit <a href="https://getbootstrap.com/docs/4.0/components/carousel/#options" rel="noreferrer">getbootstrap</a>
<code>&lt;div id=&quot;carouselExampleCaptions&quot; class=&quot;carousel slide&quot; data-ride=&quot;carousel&quot; data-interval=&quot;2500&quot;&gt;</code>
when you want change speed change &quot;2500&quot;

blocks|key|291349|text|对于带scss的bootstrap+4，您可以覆盖_variables.scss中的配置变量$carousel-transition-duration，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|291350|$carousel-transition-duration:+2s;|code-block|syntax|javascript|291351|或者对于元素的单个持续时间设置|291352|.carousel-item+{
++++transition-duration:+2s;
}|291353|您的css/scss中的特定元素。|291354|entityMap^0|P|F|1A|T|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|10|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|R|$]]

For bootstrap 4 with scss, you can overwrite the configuration variable <code>$carousel-transition-duration</code> in your <code>_variables.scss</code> like this:

<pre><code>$carousel-transition-duration: 2s;
</code></pre>

Or for element individual duration set the

<pre><code>.carousel-item {
 transition-duration: 2s;
}
</code></pre>

of your specific element in your css/scss.

blocks|key|73624|text|如果您需要以编程方式更改(例如)基于特定条件的速度，则可能只在许多轮播中的一个上更改速度，您可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|73625|如果Html是这样的：|73626|<div+id="theSlidesList"+class="carousel-inner"+role="listbox">
++<div+id="Slide_00"+class="item+active">+...
++<div+id="Slide_01"+class="item">+...
++...
</div>|code-block|syntax|javascript|73627|JavaScript应该是这样的：|73628|$(+"#theSlidesList"+).find(+".item"+).css(+"-webkit-transition",+"transform+1.9s+ease-in-out+0s"+).css(+"transition",+"transform+1.9s+ease-in-out+0s"+)|73629|添加更多.css(+...+)以包含其他浏览器。|73630|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

If you need to do it programmatically to change (for example) the speed based on certain conditions on perhaps only one of many carousels, you could do something like this:

If the Html is like this:

<pre><code>&lt;div id="theSlidesList" class="carousel-inner" role="listbox"&gt;
 &lt;div id="Slide_00" class="item active"&gt; ...
 &lt;div id="Slide_01" class="item"&gt; ...
 ...
&lt;/div&gt;
</code></pre>

JavaScript would be like this:

<pre><code>$( "#theSlidesList" ).find( ".item" ).css( "-webkit-transition", "transform 1.9s ease-in-out 0s" ).css( "transition", "transform 1.9s ease-in-out 0s" )
</code></pre>

Add more .css( ... ) to include other browsers.

blocks|key|290945|text|在包含间隔或未压缩的间隔之后，您可以添加bootstrap.min.js作为参数，如下所示jQuery("#numbers").carousel({'interval':900+});它适合我|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|290946|entityMap^0|K|G|19|1B|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

after including <code>bootstrap.min.js</code> or uncompressed one, you can just add interval as a parameter as below 
<code>jQuery("#numbers").carousel({'interval':900 });</code> It works for me

blocks|key|290986|text|如果您不想更改bootstrap的js文件，也可以直接将所需的值注入jquery插件(bootsrap+3.3.6)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|290987|当然，这需要通过js手动激活carousel，而不是直接通过data-ride属性。|290988|例如：|290989|var+interval+=+3500;
$.fn.carousel.Constructor.TRANSITION_DURATION+=+interval+-+500;
elem.carousel({
++++interval+:+interval
});|code-block|syntax|javascript|290990|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

If you don't want to change the js files of bootstrap, you can also directly inject the wanted value into the jquery plugin (bootsrap 3.3.6).

This requires of course, that the carousel is activated manually via js, not directly via the data-ride attribute.

For example:

<pre><code>var interval = 3500;
$.fn.carousel.Constructor.TRANSITION_DURATION = interval - 500;
elem.carousel({
 interval : interval
});
</code></pre>

blocks|key|73889|text|如果您希望在加载CDN引导样式后编辑引导3.3.5+%7C的幻灯片进出速度(而不是更改幻灯片之间的间隔时间)，请使用以下类覆盖您自己的css样式集中的样式。1.5是时间变化。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|73890|.carousel-inner+>+.item+{
-webkit-transition:+1.5s+ease-in-out+;
-o-transition:+1.5s+ease-in-out+;
transition:+1.5s+ease-in-out+;
}
.carousel-inner+>+.item+{
-webkit-transition:+-webkit-transform+1.5s+ease-in-out;
-o-transition:+-o-transform+1.5s+ease-in-out;
transition:+transform+1.5s+ease-in-out;

}|code-block|syntax|javascript|73891|之后，您将需要替换javascript中的carousel函数。要做到这一点，您需要在加载默认bootstrap.min.js函数后将其覆盖。(在我看来，直接覆盖bootstrap文件不是一个好主意)。因此，在bootstrap.min.js之后创建一个mynewscript.js并加载它，然后添加新的carousel函数。您需要编辑的唯一行是这一行，Carousel.TRANSITION_DURATION+=+1500。1500等于1.5。希望这能有所帮助。|73892|++++%2Bfunction+($)+{
++'use+strict';

++//+CAROUSEL+CLASS+DEFINITION
++//+=========================

++var+Carousel+=+function+(element,+options)+{
++++this.$element++++=+$(element)
++++this.$indicators+=+this.$element.find('.carousel-indicators')
++++this.options+++++=+options
++++this.paused++++++=+null
++++this.sliding+++++=+null
++++this.interval++++=+null
++++this.$active+++++=+null
++++this.$items++++++=+null

++++this.options.keyboard+&&+this.$element.on('keydown.bs.carousel',+$.proxy(this.keydown,+this))

++++this.options.pause+==+'hover'+&&+!('ontouchstart'+in+document.documentElement)+&&+this.$element
++++++.on('mouseenter.bs.carousel',+$.proxy(this.pause,+this))
++++++.on('mouseleave.bs.carousel',+$.proxy(this.cycle,+this))
++}

++Carousel.VERSION++=+'3.3.5'

++Carousel.TRANSITION_DURATION+=+1500

++Carousel.DEFAULTS+=+{
++++interval:+5000,
++++pause:+'hover',
++++wrap:+true,
++++keyboard:+true
++}

++Carousel.prototype.keydown+=+function+(e)+{
++++if+(/input%7Ctextarea/i.test(e.target.tagName))+return
++++switch+(e.which)+{
++++++case+37:+this.prev();+break
++++++case+39:+this.next();+break
++++++default:+return
++++}

++++e.preventDefault()
++}

++Carousel.prototype.cycle+=+function+(e)+{
++++e+%7C%7C+(this.paused+=+false)

++++this.interval+&&+clearInterval(this.interval)

++++this.options.interval
++++++&&+!this.paused
++++++&&+(this.interval+=+setInterval($.proxy(this.next,+this),+this.options.interval))

++++return+this
++}

++Carousel.prototype.getItemIndex+=+function+(item)+{
++++this.$items+=+item.parent().children('.item')
++++return+this.$items.index(item+%7C%7C+this.$active)
++}

++Carousel.prototype.getItemForDirection+=+function+(direction,+active)+{
++++var+activeIndex+=+this.getItemIndex(active)
++++var+willWrap+=+(direction+==+'prev'+&&+activeIndex+===+0)
++++++++++++++++%7C%7C+(direction+==+'next'+&&+activeIndex+==+(this.$items.length+-+1))
++++if+(willWrap+&&+!this.options.wrap)+return+active
++++var+delta+=+direction+==+'prev'+?+-1+:+1
++++var+itemIndex+=+(activeIndex+%2B+delta)+%25+this.$items.length
++++return+this.$items.eq(itemIndex)
++}

++Carousel.prototype.to+=+function+(pos)+{
++++var+that++++++++=+this
++++var+activeIndex+=+this.getItemIndex(this.$active+=+this.$element.find('.item.active'))

++++if+(pos+>+(this.$items.length+-+1)+%7C%7C+pos+<+0)+return

++++if+(this.sliding)+++++++return+this.$element.one('slid.bs.carousel',+function+()+{+that.to(pos)+})+//+yes,+"slid"
++++if+(activeIndex+==+pos)+return+this.pause().cycle()

++++return+this.slide(pos+>+activeIndex+?+'next'+:+'prev',+this.$items.eq(pos))
++}

++Carousel.prototype.pause+=+function+(e)+{
++++e+%7C%7C+(this.paused+=+true)

++++if+(this.$element.find('.next,+.prev').length+&&+$.support.transition)+{
++++++this.$element.trigger($.support.transition.end)
++++++this.cycle(true)
++++}

++++this.interval+=+clearInterval(this.interval)

++++return+this
++}

++Carousel.prototype.next+=+function+()+{
++++if+(this.sliding)+return
++++return+this.slide('next')
++}

++Carousel.prototype.prev+=+function+()+{
++++if+(this.sliding)+return
++++return+this.slide('prev')
++}

++Carousel.prototype.slide+=+function+(type,+next)+{
++++var+$active+++=+this.$element.find('.item.active')
++++var+$next+++++=+next+%7C%7C+this.getItemForDirection(type,+$active)
++++var+isCycling+=+this.interval
++++var+direction+=+type+==+'next'+?+'left'+:+'right'
++++var+that++++++=+this

++++if+($next.hasClass('active'))+return+(this.sliding+=+false)

++++var+relatedTarget+=+$next[0]
++++var+slideEvent+=+$.Event('slide.bs.carousel',+{
++++++relatedTarget:+relatedTarget,
++++++direction:+direction
++++})
++++this.$element.trigger(slideEvent)
++++if+(slideEvent.isDefaultPrevented())+return

++++this.sliding+=+true

++++isCycling+&&+this.pause()

++++if+(this.$indicators.length)+{
++++++this.$indicators.find('.active').removeClass('active')
++++++var+$nextIndicator+=+$(this.$indicators.children()[this.getItemIndex($next)])
++++++$nextIndicator+&&+$nextIndicator.addClass('active')
++++}

++++var+slidEvent+=+$.Event('slid.bs.carousel',+{+relatedTarget:+relatedTarget,+direction:+direction+})+//+yes,+"slid"
++++if+($.support.transition+&&+this.$element.hasClass('slide'))+{
++++++$next.addClass(type)
++++++$next[0].offsetWidth+//+force+reflow
++++++$active.addClass(direction)
++++++$next.addClass(direction)
++++++$active
++++++++.one('bsTransitionEnd',+function+()+{
++++++++++$next.removeClass([type,+direction].join('+')).addClass('active')
++++++++++$active.removeClass(['active',+direction].join('+'))
++++++++++that.sliding+=+false
++++++++++setTimeout(function+()+{
++++++++++++that.$element.trigger(slidEvent)
++++++++++},+0)
++++++++})
++++++++.emulateTransitionEnd(Carousel.TRANSITION_DURATION)
++++}+else+{
++++++$active.removeClass('active')
++++++$next.addClass('active')
++++++this.sliding+=+false
++++++this.$element.trigger(slidEvent)
++++}

++++isCycling+&&+this.cycle()

++++return+this
++}


++//+CAROUSEL+PLUGIN+DEFINITION
++//+==========================

++function+Plugin(option)+{
++++return+this.each(function+()+{
++++++var+$this+++=+$(this)
++++++var+data++++=+$this.data('bs.carousel')
++++++var+options+=+$.extend({},+Carousel.DEFAULTS,+$this.data(),+typeof+option+==+'object'+&&+option)
++++++var+action++=+typeof+option+==+'string'+?+option+:+options.slide

++++++if+(!data)+$this.data('bs.carousel',+(data+=+new+Carousel(this,+options)))
++++++if+(typeof+option+==+'number')+data.to(option)
++++++else+if+(action)+data[action]()
++++++else+if+(options.interval)+data.pause().cycle()
++++})
++}

++var+old+=+$.fn.carousel

++$.fn.carousel+++++++++++++=+Plugin
++$.fn.carousel.Constructor+=+Carousel


++//+CAROUSEL+NO+CONFLICT
++//+====================

++$.fn.carousel.noConflict+=+function+()+{
++++$.fn.carousel+=+old
++++return+this
++}


++//+CAROUSEL+DATA-API
++//+=================

++var+clickHandler+=+function+(e)+{
++++var+href
++++var+$this+++=+$(this)
++++var+$target+=+$($this.attr('data-target')+%7C%7C+(href+=+$this.attr('href'))+&&+href.replace(/.*(?=#[%5E\s]%2B$)/,+''))+//+strip+for+ie7
++++if+(!$target.hasClass('carousel'))+return
++++var+options+=+$.extend({},+$target.data(),+$this.data())
++++var+slideIndex+=+$this.attr('data-slide-to')
++++if+(slideIndex)+options.interval+=+false

++++Plugin.call($target,+options)

++++if+(slideIndex)+{
++++++$target.data('bs.carousel').to(slideIndex)
++++}

++++e.preventDefault()
++}

++$(document)
++++.on('click.bs.carousel.data-api',+'[data-slide]',+clickHandler)
++++.on('click.bs.carousel.data-api',+'[data-slide-to]',+clickHandler)

++$(window).on('load',+function+()+{
++++$('[data-ride="carousel"]').each(function+()+{
++++++var+$carousel+=+$(this)
++++++Plugin.call($carousel,+$carousel.data())
++++})
++})

}(jQuery);|73893|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

If you are looking to edit the speed in which the slides come in and out (not the time in between changing slides called interval) for bootstrap 3.3.5 | After loading CDN bootstrap styles, overwrite the styles in your own css styleseet using the following classes. the 1.5 is the time change.

<pre><code>.carousel-inner &gt; .item {
-webkit-transition: 1.5s ease-in-out ;
-o-transition: 1.5s ease-in-out ;
transition: 1.5s ease-in-out ;
}
.carousel-inner &gt; .item {
-webkit-transition: -webkit-transform 1.5s ease-in-out;
-o-transition: -o-transform 1.5s ease-in-out;
transition: transform 1.5s ease-in-out;

}
</code></pre>

after that, you will need to replace the carousel function in javascript. To do this you will overwrite the default bootstrap.min.js function after it loads. (In my opinion it is not a good idea to overwrite bootstrap files directly).
so create a mynewscript.js and load it after bootstrap.min.js and add the new carousel function. The only line you will want to edit is this one, Carousel.TRANSITION_DURATION = 1500. 1500 being 1.5. Hope this helps.

<pre><code> +function ($) {
 'use strict';

 // CAROUSEL CLASS DEFINITION
 // =========================

 var Carousel = function (element, options) {
 this.$element = $(element)
 this.$indicators = this.$element.find('.carousel-indicators')
 this.options = options
 this.paused = null
 this.sliding = null
 this.interval = null
 this.$active = null
 this.$items = null

 this.options.keyboard &amp;&amp; this.$element.on('keydown.bs.carousel', $.proxy(this.keydown, this))

 this.options.pause == 'hover' &amp;&amp; !('ontouchstart' in document.documentElement) &amp;&amp; this.$element
 .on('mouseenter.bs.carousel', $.proxy(this.pause, this))
 .on('mouseleave.bs.carousel', $.proxy(this.cycle, this))
 }

 Carousel.VERSION = '3.3.5'

 Carousel.TRANSITION_DURATION = 1500

 Carousel.DEFAULTS = {
 interval: 5000,
 pause: 'hover',
 wrap: true,
 keyboard: true
 }

 Carousel.prototype.keydown = function (e) {
 if (/input|textarea/i.test(e.target.tagName)) return
 switch (e.which) {
 case 37: this.prev(); break
 case 39: this.next(); break
 default: return
 }

 e.preventDefault()
 }

 Carousel.prototype.cycle = function (e) {
 e || (this.paused = false)

 this.interval &amp;&amp; clearInterval(this.interval)

 this.options.interval
 &amp;&amp; !this.paused
 &amp;&amp; (this.interval = setInterval($.proxy(this.next, this), this.options.interval))

 return this
 }

 Carousel.prototype.getItemIndex = function (item) {
 this.$items = item.parent().children('.item')
 return this.$items.index(item || this.$active)
 }

 Carousel.prototype.getItemForDirection = function (direction, active) {
 var activeIndex = this.getItemIndex(active)
 var willWrap = (direction == 'prev' &amp;&amp; activeIndex === 0)
 || (direction == 'next' &amp;&amp; activeIndex == (this.$items.length - 1))
 if (willWrap &amp;&amp; !this.options.wrap) return active
 var delta = direction == 'prev' ? -1 : 1
 var itemIndex = (activeIndex + delta) % this.$items.length
 return this.$items.eq(itemIndex)
 }

 Carousel.prototype.to = function (pos) {
 var that = this
 var activeIndex = this.getItemIndex(this.$active = this.$element.find('.item.active'))

 if (pos &gt; (this.$items.length - 1) || pos &lt; 0) return

 if (this.sliding) return this.$element.one('slid.bs.carousel', function () { that.to(pos) }) // yes, "slid"
 if (activeIndex == pos) return this.pause().cycle()

 return this.slide(pos &gt; activeIndex ? 'next' : 'prev', this.$items.eq(pos))
 }

 Carousel.prototype.pause = function (e) {
 e || (this.paused = true)

 if (this.$element.find('.next, .prev').length &amp;&amp; $.support.transition) {
 this.$element.trigger($.support.transition.end)
 this.cycle(true)
 }

 this.interval = clearInterval(this.interval)

 return this
 }

 Carousel.prototype.next = function () {
 if (this.sliding) return
 return this.slide('next')
 }

 Carousel.prototype.prev = function () {
 if (this.sliding) return
 return this.slide('prev')
 }

 Carousel.prototype.slide = function (type, next) {
 var $active = this.$element.find('.item.active')
 var $next = next || this.getItemForDirection(type, $active)
 var isCycling = this.interval
 var direction = type == 'next' ? 'left' : 'right'
 var that = this

 if ($next.hasClass('active')) return (this.sliding = false)

 var relatedTarget = $next[0]
 var slideEvent = $.Event('slide.bs.carousel', {
 relatedTarget: relatedTarget,
 direction: direction
 })
 this.$element.trigger(slideEvent)
 if (slideEvent.isDefaultPrevented()) return

 this.sliding = true

 isCycling &amp;&amp; this.pause()

 if (this.$indicators.length) {
 this.$indicators.find('.active').removeClass('active')
 var $nextIndicator = $(this.$indicators.children()[this.getItemIndex($next)])
 $nextIndicator &amp;&amp; $nextIndicator.addClass('active')
 }

 var slidEvent = $.Event('slid.bs.carousel', { relatedTarget: relatedTarget, direction: direction }) // yes, "slid"
 if ($.support.transition &amp;&amp; this.$element.hasClass('slide')) {
 $next.addClass(type)
 $next[0].offsetWidth // force reflow
 $active.addClass(direction)
 $next.addClass(direction)
 $active
 .one('bsTransitionEnd', function () {
 $next.removeClass([type, direction].join(' ')).addClass('active')
 $active.removeClass(['active', direction].join(' '))
 that.sliding = false
 setTimeout(function () {
 that.$element.trigger(slidEvent)
 }, 0)
 })
 .emulateTransitionEnd(Carousel.TRANSITION_DURATION)
 } else {
 $active.removeClass('active')
 $next.addClass('active')
 this.sliding = false
 this.$element.trigger(slidEvent)
 }

 isCycling &amp;&amp; this.cycle()

 return this
 }


 // CAROUSEL PLUGIN DEFINITION
 // ==========================

 function Plugin(option) {
 return this.each(function () {
 var $this = $(this)
 var data = $this.data('bs.carousel')
 var options = $.extend({}, Carousel.DEFAULTS, $this.data(), typeof option == 'object' &amp;&amp; option)
 var action = typeof option == 'string' ? option : options.slide

 if (!data) $this.data('bs.carousel', (data = new Carousel(this, options)))
 if (typeof option == 'number') data.to(option)
 else if (action) data[action]()
 else if (options.interval) data.pause().cycle()
 })
 }

 var old = $.fn.carousel

 $.fn.carousel = Plugin
 $.fn.carousel.Constructor = Carousel


 // CAROUSEL NO CONFLICT
 // ====================

 $.fn.carousel.noConflict = function () {
 $.fn.carousel = old
 return this
 }


 // CAROUSEL DATA-API
 // =================

 var clickHandler = function (e) {
 var href
 var $this = $(this)
 var $target = $($this.attr('data-target') || (href = $this.attr('href')) &amp;&amp; href.replace(/.*(?=#[^\s]+$)/, '')) // strip for ie7
 if (!$target.hasClass('carousel')) return
 var options = $.extend({}, $target.data(), $this.data())
 var slideIndex = $this.attr('data-slide-to')
 if (slideIndex) options.interval = false

 Plugin.call($target, options)

 if (slideIndex) {
 $target.data('bs.carousel').to(slideIndex)
 }

 e.preventDefault()
 }

 $(document)
 .on('click.bs.carousel.data-api', '[data-slide]', clickHandler)
 .on('click.bs.carousel.data-api', '[data-slide-to]', clickHandler)

 $(window).on('load', function () {
 $('[data-ride="carousel"]').each(function () {
 var $carousel = $(this)
 Plugin.call($carousel, $carousel.data())
 })
 })

}(jQuery);
</code></pre>

blocks|key|291096|text|所有旋转木马|type|unstyled|depth|inlineStyleRanges|entityRanges|data|291097|++<script+type="text/javascript">
++++++++++++++$(document).ready(function+()+{
++++++++++++$('.carousel').carousel({
++++++++++++++++interval:+15000
++++++++++++})
++++++++});

++++</script>|code-block|syntax|javascript|291098|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

All carousel 

<pre><code> &lt;script type="text/javascript"&gt;
 $(document).ready(function () {
 $('.carousel').carousel({
 interval: 15000
 })
 });

 &lt;/script&gt;
</code></pre>

blocks|key|291303|text|在你的CSS中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|291304|.carousel-item+{
++++transition-duration:+1.5s,+1.5s;
}|code-block|syntax|javascript|291305|注意，时间包含在为轮播定义的数据间隔中。|291306|希望这能帮上忙。:)|291307|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

In your CSS:

<pre><code>.carousel-item {
 transition-duration: 1.5s, 1.5s;
}
</code></pre>

Take care, the time is included in data-interval defined for the carousel.

Hope it helps... :)

blocks|key|291392|text|你可以使用这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|291393|<div+id="carouselExampleSlidesOnly"+class="carousel+slide"+data-ride="carousel"+data-interval="4000">|code-block|syntax|javascript|291394|只需添加1秒后下一张图片所在的data-interval="1000"即可。|offset|length|style|CODE|291395|entityMap^0|0|0|F|K|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

You can use this
<pre><code>&lt;div id=&quot;carouselExampleSlidesOnly&quot; class=&quot;carousel slide&quot; data-ride=&quot;carousel&quot; data-interval=&quot;4000&quot;&gt;
</code></pre>
Just add <code>data-interval=&quot;1000&quot;</code> where next picture will be after 1 sec.

blocks|key|74163|text|使用两个答案的组合为我提供了我正在寻找的样式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|74164|data-interval+attr在bootstrap+5中对我完全不起作用，我也不在本地存储bootstrap|offset|length|style|CODE|74165|减慢从一张幻灯片到另一张幻灯片的时间|74166|站点CSS文件。|74167|.carousel-item+{
++++transition-duration:+1.5s;
}|code-block|syntax|javascript|74168|在转到下一张幻灯片之前放慢延迟的速度|74169|站点JS文件|74170|$(document).ready(function+()+{
++$('.carousel').carousel({
++++interval:+15000
++})
});|74171|entityMap^0|0|0|D|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@$D|10|E|11|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|12|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|13|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|14|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|15|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|16|8|@]|9|@]|A|$]]|$1|U|3|V|5|N|7|17|8|@]|9|@]|A|$O|P]]|$1|W|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|X|$]]

Using a combination of two answers provided me with the styling i was looking for.
<code>data-interval</code> attr did not work AT ALL for me in bootstrap 5. I also do not store bootstrap locally
To slow down the time from ONE slide to another 
Sites CSS file.
<pre class="lang-css prettyprint-override"><code>.carousel-item {
 transition-duration: 1.5s;
}
</code></pre>
To slow down the delay BEFORE moving to the next slide
Sites JS file
<pre class="lang-js prettyprint-override"><code>$(document).ready(function () {
 $('.carousel').carousel({
 interval: 15000
 })
});
</code></pre>

blocks|key|291283|text|添加数据间隔|type|unstyled|depth|inlineStyleRanges|entityRanges|data|291284|data-interval="20000"|code-block|syntax|javascript|291285|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Add Data interval

<pre><code>data-interval="20000"
</code></pre>

blocks|key|74104|text|使用data-interval="2000"，如下所示|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|74105|1000+=1秒|74106|<div+id="carouselExampleIndicators"+class="carousel+slide+carousel-custom"+data-`ride="carousel"+data-interval="2000">`|code-block|syntax|javascript|74107|entityMap^0|2|K|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|S|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

use <code>data-interval=&quot;2000&quot;</code> like below
1000 = 1 sec
<pre><code>&lt;div id=&quot;carouselExampleIndicators&quot; class=&quot;carousel slide carousel-custom&quot; data-`ride=&quot;carousel&quot; data-interval=&quot;2000&quot;&gt;`
</code></pre>

blocks|key|73939|text|如果使用引导模块，请编辑文件@ng-+ngCarousel+/ng-bootstrap/carousel-config.js中的interval变量，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|73940|var+NgbCarouselConfig+=+/**+@class+*/+(function+()+{
function+NgbCarouselConfig()+{
++++this.interval+=+10000;
++++this.wrap+=+true;
++++...
}
...|code-block|syntax|javascript|73941|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If using the ngCarousel module, edit the interval variable in the file @ng-bootstrap/ng-bootstrap/carousel-config.js like so:

<pre><code>var NgbCarouselConfig = /** @class */ (function () {
function NgbCarouselConfig() {
 this.interval = 10000;
 this.wrap = true;
 ...
}
...
</code></pre>

blocks|key|291489|text|在Bootstrap+4.1中，这只能通过添加：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|291490|$carousel-transition-duration:+2s;+//+or+some+duration+length|code-block|syntax|javascript|291491|在您的自定义SASS变量中进行编译。|291492|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

In Bootstrap 4.1, this can be achieved only by adding:
<pre><code>$carousel-transition-duration: 2s; // or some duration length
</code></pre>
in your custom SASS variable and compiled.

blocks|key|74230|text|.carousel-inner+.carousel-item+{
++++transition:+-webkit-transform+2s+ease;
++++transition:+transform+2s+ease;
++++transition:+transform+2s+ease,+-webkit-transform+2s+ease;
++++-webkit-transition:+-webkit-transform+2s+ease;
++++-moz-transition:+-webkit-transform+2s+ease;
++++-ms-transition:+-webkit-transform+2s+ease;
++++-o-transition:+-webkit-transform+2s+ease;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|74231|公认的答案是有效的，但这也是唯一有效的方法。为什么要为js操心呢？|unstyled|74232|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>.carousel-inner .carousel-item {
 transition: -webkit-transform 2s ease;
 transition: transform 2s ease;
 transition: transform 2s ease, -webkit-transform 2s ease;
 -webkit-transition: -webkit-transform 2s ease;
 -moz-transition: -webkit-transform 2s ease;
 -ms-transition: -webkit-transform 2s ease;
 -o-transition: -webkit-transform 2s ease;
}
</code></pre>
accepted answer works but this and only this also works... why bother with js ?

blocks|key|74271|text|如果对您没有效果，请尝试此方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|74272|<div+id="myCarousel"+class="carousel+slide"+data-ride="carousel"+data-interval="3000"></div>|code-block|syntax|javascript|74273|1000等于1秒，3000等于3秒。你可以用你想要的滑块速度替换‘3000’。|74274|以下是您可以更改速度的css：|74275|.carousel-inner>.item+{
-webkit-transition:+-webkit-transform+1.2s+ease-in-out+!important;
-o-transition:+-o-transform+1.2s+ease-in-out+!important;
transition:+transform+1.2s+ease-in-out+!important;
}|74276|要查看完整的帖子，请查看this+post+here。|offset|length|74277|entityMap|0|LINK|mutability|MUTABLE|url|https://blog.identitydesign.us/bootstrap-carousel-slider-transition-speed-time-interval/^0|0|0|0|0|0|C|E|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|12|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|13|8|@]|9|@$O|14|P|15|1|16]]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

Try this if nothing works for you.
<pre><code>&lt;div id=&quot;myCarousel&quot; class=&quot;carousel slide&quot; data-ride=&quot;carousel&quot; data-interval=&quot;3000&quot;&gt;&lt;/div&gt;
</code></pre>
1000 is 1 second, and 3000 is 3 seconds. You can replace ‘3000’ with your desired slider speed.
Below is the css you can change the speed:
<pre><code>.carousel-inner&gt;.item {
-webkit-transition: -webkit-transform 1.2s ease-in-out !important;
-o-transition: -o-transform 1.2s ease-in-out !important;
transition: transform 1.2s ease-in-out !important;
}
</code></pre>
To see the full post, take a look at
<a href="https://blog.identitydesign.us/bootstrap-carousel-slider-transition-speed-time-interval/" rel="nofollow noreferrer">this post here</a>.

I see you can set the interval but I want to control how fast the items slide?

<pre><code> // Sets interval...what is transition slide speed?
 $('#mainCarousel').carousel({
 interval: 3000
});
</code></pre>

How can I control the speed that bootstrap carousel slides in items?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

我知道你可以设置时间间隔，但我想控制物品滑动的速度？   // Sets interval...what is transition slide speed?    $('#mainCarousel').carousel({    interval: 3000});

问如何控制bootstrap carousel在项目中滑动的速度？
EN

回答 22

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何控制bootstrap carousel在项目中滑动的速度？EN

回答 22

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何控制bootstrap carousel在项目中滑动的速度？
EN