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

Question

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

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

Googlers --> to slow down INTERVAL (time between showing next image)::: https://stackoverflow.com/a/38203373/1985648 — Don Cheadle, Sep 04 '19 at 22:36
In case if you are looking for Angular solution, please [click here](https://stackoverflow.com/questions/67927344/add-interval-for-each-mdb-carousel-item-in-angular/67947718#67947718) — Shahid, Jun 12 '21 at 10:14

score 129 · Accepted Answer · edited Jan 17 '18 at 00:49

129

The speed cannot be controlled by the API. Though you can modify CSS that is in charge of that. In the carousel.less file find

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

and change .6s to whatever you want.

In case you do not use .less, find 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 time you want. You also might want to edit time in the function call below:

.emulateTransitionEnd(2000)

at bootstrap.js in function Carousel.prototype.slide. That synchronize transition and prevent slide to disapear before transition ends.

EDIT 7/8/2014

As @YellowShark pointed out the edits in JS are not needed anymore. Only apply css changes.

EDIT 20/8/2015 Now, after you edit 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 to change the value inside it (600 for default). The final value must be the same that you put in your css file( for example 10s in css = 10000 in .js)

EDIT 16/01/2018 For Bootstrap 4, to change the transition time to e.g., 2 seconds, add

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

to your site's JS file, and

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

to your site's CSS file.

edited Jan 17 '18 at 00:49

expz

1,578
1
13
19

answered Jun 27 '13 at 00:10

Dmitry Efimenko

10,973
7
62
79

1

Thanks for the reply! I tried putting the latter in my styles of my main .html page and changed the .6 to .1 and it didn't seem to have no effect using chrome. – genxgeek Jun 27 '13 at 00:29
Not clear... did you try to modify bootstrap files or did you just add this stuff into your own css? It's safer to edit bootstrap files. Otherwise you need to make sure that your styles load last and overwrite bootstrap styles. – Dmitry Efimenko Jun 27 '13 at 00:39
My styles were possibly loading last. However, my defined css styles in my main html page are defined after I include the link to include bootstrap.css. Either way modifying within bootstrap worked. Thank you! – genxgeek Jun 27 '13 at 00:51
Doesn't seem to work correctly in Bootstrap 3. The slides flash disappear before they have finished moving. – Chris Harrison Sep 05 '13 at 09:44
2

Just wanted to point out that you do NOT have to modify any javaScript (anymore), [that line in the code now pulls the .css('transition-duration') value](https://github.com/twbs/bootstrap/blob/master/dist/js/bootstrap.js#L388), so you just need to add some CSS as described above, and that's it. (Also, be sure the carousel item has the "slide" class, not sure that's mentioned in the docs.) – YellowShark Mar 24 '14 at 00:52
This answer worked for me, but the ideal way to do it is in a separate CSS file, overriding the default BS transition. You ONLY need the transition style info in your override definition. – mwotton Sep 03 '14 at 23:03
There are like 10 finds of `.emulateTransitionEnd` in bootstrap.js, most of them on their own line. In my case all of these have different values. Not sure which one, or if all of them are supposed to be changed to the millisecond of the transition? – Solomon Closson Jan 21 '15 at 21:47
`.carousel-inner > .item {` works fine without `position: relative;` and `display: none;`. – Stepan Zakharov Jan 27 '15 at 16:20
5

In Bootstrap 3 (v3.3.5, anyway) the JS no longer pulls that duration value from CSS. It can be easily set *without modifying Bootstrap* like so: `jQuery.fn.carousel.Constructor.TRANSITION_DURATION = 1000;` – Walf Dec 04 '15 at 02:01
I only have bootstrap.js min so this task is a bit more difficult to do. Could I just skip change in js and apply only in css? – user2903379 Feb 06 '18 at 19:06
1

jQuery.fn.carousel.Constructor.TRANSITION_DURATION returns undefined. How does one change it? The transition works and it slides slowly, but the image that slides out gets display: none; too quickly. – Ben Mar 20 '18 at 05:51
Please note that since Bootstrap 4.0 it is `.carousel-item` and not just `.item`. Also not all CSS instructions are needed as provided in this solution to archive the desired affect. Only `transition` without a dot is required. – Roland Apr 15 '20 at 23:59
it should not be this hard to change the transition – Julian Silvestri Jul 10 '21 at 19:43
While this answer is obviously correct. I cant help but think this is too much work to achieve the desired goal. K.I.S.S should be the motto. Answers below seem to be more suited to a standard approach to a simple problem like this. – Julian Silvestri Jul 12 '21 at 17:45
I'm a bit late but changing only the css transition property seems adequate why bother with js ? – emre-ozgun Aug 17 '21 at 20:26

score 112 · Answer 2 · edited Feb 07 '17 at 00:23

112

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.

edited Feb 07 '17 at 00:23

Pang

9,564
146
81
122

answered Jul 05 '16 at 12:23

jaswinder singh

1,225
1
8
2

Please try to format your question in a more proper way. Btw. link only are not considered as good answers. – ckruczek Jul 05 '16 at 12:32
1

Warning: the "data-interval" is measured in miliseconds. 500 = 0,5 sec (so much fast). If you have some text to show on slides, 10000 (10secs) is better. Works fine. I think that should be the accepted answer. – Renascienza Jan 08 '17 at 03:39
26

This answer is **incorrect**. `data-interval` determines the time span after which new slide moves. It doesn't determine how much time one slide takes to move. – user31782 Feb 11 '17 at 13:19
1

Thanks dude, it saved my day. +1 and this should be checked as right answer rather than going to edit bootstrap.css file. – FONGOH MARTIN Jun 06 '17 at 10:38
As well save a lot of time. Thx – Kinga Jun 21 '17 at 00:54
2

I was looking for THIS exact answer... but tried the other answer before, before I realized that that had to do with the slide speed, while this answer deals with the intervals between the slides. So thank you for including this answer, since this was exactly what I wanted! (even though 500 is too fast, but that's a different story) – Malachi Jun 27 '17 at 16:36
Do you know how to set the interval per slide? – MZaragoza Jul 17 '17 at 03:07
Best answer! Working with Bootstrap 4 (Oct 2018) – Guybrush Oct 26 '18 at 17:04
Please be aware that from bootstrap 5, it is `data-bs-interval`(see one of the answers down below). `data-interval` does not seem to work anymore for bootstrap 5. – frankmurphy Oct 01 '22 at 06:33

score 14 · Answer 3 · edited Jun 07 '16 at 15:53

14

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.

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

edited Jun 07 '16 at 15:53

Tony Hinkle

4,706
7
23
35

answered Jun 07 '16 at 06:14

Ali Umair

690
7
10

Can you provide an example. I need to give different time interval for diff slides and these are configured in my controller returned from an api call. Can we show web pages using slider as well? – Archna Oct 19 '16 at 19:49
2

data-interval determines the time span after which new slide moves, not the animation duration. – Ricardo Vigatti Jan 24 '19 at 13:31

score 12 · Answer 4 · answered Sep 05 '13 at 10:18

For Twitter Bootstrap 3:

You must change the CSS transition as specified in the other 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. In the bootstrap.js there is a line:

.emulateTransitionEnd(600)

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

.emulateTransitionEnd(1500)

score 11 · Answer 5 · answered Nov 04 '18 at 13:02

11

With Bootstrap 4, just use this CSS:

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

Change 3s to the duration of your choice.

answered Nov 04 '18 at 13:02

kmoser

8,780
3
24
40

1

very very nice :) – Mohammed Baashar Jan 16 '20 at 15:25

score 10 · Answer 6 · answered Jan 20 '15 at 19:11

One thing I noticed is that Bootstrap 3 is adding the styles with both a .6s and 0.6s. So you may need to explicitly define your transition duration like this (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;
    }

Not work for me :( it's still roll fast as a car with no change (I changed to 1.6) — Andiana, Jun 11 '15 at 00:28

score 8 · Answer 7 · answered Mar 04 '16 at 14:32

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

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

it gives to the carousel an interval of 8 seconds

score 6 · Answer 8 · answered Jun 26 '20 at 08:58

6

no need any external code just use data-interval="" attribute

more information visit getbootstrap

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel" data-interval="2500">

when you want change speed change "2500"

answered Jun 26 '20 at 08:58

Chethana Kalpa

61
1
2

score 4 · Answer 9 · answered Mar 02 '20 at 17:09

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

$carousel-transition-duration: 2s;

Or for element individual duration set the

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

of your specific element in your css/scss.

score 3 · Answer 10 · answered Jun 23 '15 at 20:12

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:

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

JavaScript would be 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 include other browsers.

score 3 · Answer 11 · answered Jan 30 '16 at 01:58

3

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

answered Jan 30 '16 at 01:58

Patrick Mutwiri

1,301
1
12
23

score 3 · Answer 12 · answered Feb 07 '16 at 18:02

3

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:

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

answered Feb 07 '16 at 18:02

Andreas

1,691
1
15
34

I like this approach because it does not requires you to edit `bootstrap.js`, and making it "unupdateable".. – TryingToImprove Oct 06 '16 at 09:09
After changing to 200, i don't see the smooth animation anymore, the images are gonna disapear right in the middle of transition – TomSawyer Feb 27 '17 at 08:08
Hi @TomSawyer - the animations are maintained via the css, but it is important, that the TRANSITON_DURATION is long enough, to cover the full transition. in the javascript it just defines, when the ```in``` class is set, and when it is removed again. If you want to shorten the animation, please check, where it is defined in the less files. – Andreas Feb 28 '17 at 15:09

score 3 · Answer 13 · answered Apr 18 '18 at 15:29

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.

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

    +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);

score 3 · Answer 14 · answered Mar 13 '21 at 14:41

Using a combination of two answers provided me with the styling i was looking for.

data-interval 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.

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

To slow down the delay BEFORE moving to the next slide

Sites JS file

$(document).ready(function () {
  $('.carousel').carousel({
    interval: 15000
  })
});

score 3 · Answer 15 · answered Sep 21 '21 at 08:49

3

In Bootstrap 5, add data-bs-interval="6000" attribute like this:

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

Carousel items change every 6 seconds.

answered Sep 21 '21 at 08:49

Γιώργος Τερζής

386
3
7

score 2 · Answer 16 · edited Nov 03 '16 at 14:44

To complement the previous answers, after you edit 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 to change the value inside it (600 for default). The final value must be the same that you put in your CSS file (for example, 10s 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's fine too*/
pause: 'hover',
wrap: true,
keyboard: true
}

score 2 · Answer 17 · answered Sep 08 '15 at 19:55

2

What worked for me was to change interval in bootstrap.js

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

answered Sep 08 '15 at 19:55

paulo62

2,637
1
21
15

1

That controls the frequency of animations, not the speed of an individual animation. – Walf Dec 04 '15 at 02:05

mirazimi · Answer 18 · 2017-04-03T05:38:20.633

2

All carousel

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

    </script>

edited Apr 03 '17 at 05:38

answered Apr 03 '17 at 04:48

mirazimi

814
10
11

Please provide explanation with answer – Panther Apr 03 '17 at 05:07
1

Once again this simply determines the interval, not the transition time – Tim Hallman May 03 '17 at 17:39

score 2 · Answer 19 · answered May 06 '19 at 14:52

2

In your CSS:

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

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

Hope it helps... :)

answered May 06 '19 at 14:52

Ovidiu Cosma

39
2

score 2 · Answer 20 · edited Jan 08 '21 at 08:02

2

You can use this

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel" data-interval="4000">

Just add data-interval="1000" where next picture will be after 1 sec.

edited Jan 08 '21 at 08:02

Atul Kumar

690
1
9
20

answered Jan 06 '21 at 21:52

Jovan Ilic

61
6

score 1 · Answer 21 · answered Apr 01 '19 at 06:49

1

Add Data interval

data-interval="20000"

answered Apr 01 '19 at 06:49

Pankaj Upadhyay

2,114
21
22

score 1 · Answer 22 · answered Mar 04 '21 at 04:15

1

use data-interval="2000" like below

1000 = 1 sec

<div id="carouselExampleIndicators" class="carousel slide carousel-custom" data-`ride="carousel" data-interval="2000">`

answered Mar 04 '21 at 04:15

pubudu sachintha

609
8
7

score 0 · Answer 23 · answered Aug 11 '18 at 14:52

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

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

score 0 · Answer 24 · answered Jun 25 '20 at 06:48

In your main.js file or bootstrap.js, change the value of autoplayTimeout

    $('.carousel').each(function () {
        $(this).owlCarousel({
            nav: $(this).data('nav'),
            dots: $(this).data('dots'),
            loop: $(this).data('loop'),
            margin: $(this).data('space'),
            center: $(this).data('center'),
            dotsSpeed: $(this).data('speed'),
            autoplay: $(this).data('autoplay'),
            transitionStyle: $(this).data('transition'),
            animateOut: $(this).data('animate-out'),
            animateIn: $(this).data('animate-in'),
            autoplayTimeout: 3000,
            responsive: {
                0: {
                    items: 1,
                },
                400: {
                    items: $(this).data('slide-sm'),
                },
                700: {
                    items: $(this).data('slide-md'),
                },
                1000: {
                    items: $(this).data('slide'),
                }
            }
        });
    });

score 0 · Answer 25 · answered Aug 17 '21 at 20:28

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

accepted answer works but this and only this also works... why bother with js ?

score 0 · Answer 26 · answered Dec 22 '21 at 01:09

Try this if nothing works for you.

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

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:

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

To see the full post, take a look at this post here.

score 0 · Answer 27 · answered Oct 06 '22 at 07:49

This is incredible that people answer about interval, this is not at all what the question is about ! Interval is the amount of time to delay between automatically cycling an item : Read the docs

The good answer is the css transition duration :

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

score 0 · Answer 28 · edited May 09 '23 at 03:23

0

This worked for me version 5.3: -

Add data-bs-ride="carousel" where id="carouselExampleInterval"

class="carousel slide" data-bs-ride="carousel">
Add data-bs-interval="5000" to all carousel-item (your choice how long time you want)

class="carousel-item active" data-bs-interval="5000">

edited May 09 '23 at 03:23

George Lords of Castle

899
2
9
18

answered Feb 06 '23 at 06:15

ankit jha

1
1

score -1 · Answer 29 · answered Apr 20 '21 at 05:19

-1

In Bootstrap 4.1, this can be achieved only by adding:

$carousel-transition-duration: 2s; // or some duration length

in your custom SASS variable and compiled.

answered Apr 20 '21 at 05:19

Tepken Vannkorn

9,648
14
61
86

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

29 Answers29

Linked