How can I control the carousel download speed in items?

Question

I see that you can set the interval, but I want to control how fast the items will move?

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

Answer 1

Speed ​​cannot be controlled by the API. Although you can change the CSS that is responsible for this. In the carousel.less file carousel.less find

 .item { display: none; position: relative; .transition(.6s ease-in-out left); } 

and change .6s to what you want.

---

If you are not using .less, look in the bootstrap.css file:

 .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; } 

and change 0.6s to the desired time. You can also change the time in the function call below:

 .emulateTransitionEnd(2000) 

at bootstrap.js in the Carousel.prototype.slide function. This synchronizes the transition and prevents the slide from disappearing until the transition is complete.

EDIT on 8/8/2014

As @YellowShark pointed out, changes to JS are no longer needed. Use only css changes.

EDIT 08/20/2015 Now, after editing your css file, you just need to edit CAROUSEL.TRANSITION_DURATION (in bootstrap.js) or c.TRANSITION_DURATION (if you use bootstrap.min.js) and change the value inside it (default is 600 ) The final value should be the same as in your css file (e.g. 10 s in css = 10000 in .js)

EDIT 01/16/2018 For Bootstrap 4, to change the transition time, for example, by 2 seconds, add

 $(document).ready(function() { jQuery.fn.carousel.Constructor.TRANSITION_DURATION = 2000 // 2 seconds }); 

to your site js file and

 .carousel-inner .carousel-item { transition: -webkit-transform 2s ease; transition: transform 2s ease; transition: transform 2s ease, -webkit-transform 2s ease; } 

into the CSS file of your site.

Answer 2

Just write data-interval in the div containing the carousel:

 <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="500"> 

Example taken from w3schools .

Answer 3

You need to set the interval in the main DIV as the data interval tag. It will work perfectly, and you can give different times for different slides.

 <div class="carousel" data-interval="5000"> 

Answer 4

For Twitter Bootstrap 3:

You should change the CSS transition as indicated in another answer:

 .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; } 

From 0.6 seconds to 1.5 seconds (for example).

But also there is some Javascript to change. There is a line in bootstrap.js:

 .emulateTransitionEnd(600) 

This should be changed to the appropriate number of milliseconds. So, within 1.5 seconds you will change the number to 1500:

 .emulateTransitionEnd(1500) 

Answer 5

One thing I noticed is that Bootstrap 3 adds styles with .6s and 0.6s . Thus, you may need to explicitly state your transition duration (CSS)

  .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; } 

Answer 6

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

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

he gives the carousel an interval of 8 seconds

Answer 7

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

If the HTML looks like this:

 <div id="theSlidesList" class="carousel-inner" role="listbox"> <div id="Slide_00" class="item active"> ... <div id="Slide_01" class="item"> ... ... </div> 

JavaScript will look like this:

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

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

Answer 8

after enabling bootstrap.min.js or uncompressed, you can simply add the interval as a parameter, as shown below jQuery("#numbers").carousel({'interval':900 }); It works for me

Answer 9

If you do not want to modify the js bootstrap files, you can also directly insert the desired value into the jquery plugin (bootsrap 3.3.6).

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

For example:

 var interval = 3500; $.fn.carousel.Constructor.TRANSITION_DURATION = interval - 500; elem.carousel({ interval : interval }); 

Answer 10

In addition to the previous answers, after editing your CSS file, you just need to edit CAROUSEL.TRANSITION_DURATION (in bootstrap.js) or c.TRANSITION_DURATION (if you use bootstrap.min.js) and change the value inside it (600 by default). The final value should be the same as in your CSS file (e.g. 10 s in CSS = 10000 in .js)

 Carousel.VERSION = '3.3.2' Carousel.TRANSITION_DURATION = xxxxx /* Your number here*/ Carousel.DEFAULTS = { interval: 5000 /* you could change this value too, but to add data-interval="xxxx" to your html it fine too*/ pause: 'hover', wrap: true, keyboard: true } 

Answer 11

What worked for me is to change the interval in bootstrap.js

  Carousel.DEFAULTS = { interval: 2000, // <----- change this pause: 'hover', wrap: true, keyboard: true } 

Answer 12

If you want to edit the input and output speed of the slides (rather than the time between slide changes, called the interval) for bootstrapping 3.3.5 | After loading the CDN bootstrap styles, rewrite the styles in your own set of CSS styles using the following classes. 1.5 is a change in time.

 .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; } 

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

  +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 && 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|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 && 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 || this.$active) } Carousel.prototype.getItemForDirection = function (direction, active) { var activeIndex = this.getItemIndex(active) var willWrap = (direction == 'prev' && activeIndex === 0) || (direction == 'next' && activeIndex == (this.$items.length - 1)) if (willWrap && !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 > (this.$items.length - 1) || 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 || (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 || 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') || (href = $this.attr('href')) && 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); 

Answer 13

In Bootstrap 4, just use this CSS:

 .carousel .carousel-item { transition-duration: 3s; } 

Change 3s from to the duration of your choice.

Answer 14

Whole carousel

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

Answer 15

When using the ngCarousel module, edit the interval variable in the @ ng-bootstrap / ng-bootstrap / carousel-config.js file as follows:

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

Answer 16

Data Interval

 data-interval="20000" 

Answer 17

In your CSS:

 .carousel-item { transition-duration: 1.5s, 1.5s; } 

Take care time is included in the data interval specified for the carousel.

Hope it helps ... :)