Twitter Bootstrap Carousel autoplay on load

Question

Using the twitter bootstrap framework, how is it possible to invoke the carousel to 'auto slide.' Meaning when the page loads, the carousel automatically scrolls.

I have tried a javascript onLoad click function for the <a> of the next link, but this didn't work.

It should start playing automatically without you having to do anything. Ca you manually click previous/next links and it works? — Jan Hančič, Nov 23 '12 at 08:22
possible duplicate of [How can I make the boostrap js carousel automatically cycle as soon as the page loads?](http://stackoverflow.com/questions/9750816/how-can-i-make-the-boostrap-js-carousel-automatically-cycle-as-soon-as-the-page) — Hareesh Sivasubramanian, Sep 30 '15 at 10:33

itsme · Accepted Answer · 2013-10-01T12:28:21.763

49

you should do as the Twitter Bootstrap Documentation says about Carousel, so set the first Carousel slide item with class="active" and initialize the js for the carousel in this way:

$(function(){
    $('.carousel').carousel({
      interval: 2000
    });
});

then if it's not enough (but this never happened to me) use the bruteforce triggering the click hover the carousel control buttons like this:

$(function(){
$('.carousel').carousel({
      interval: 2000
    });
$('.carousel-control.right').trigger('click');
});

but this is just a not-needed trick, really, just follow the documentantion!

edited Oct 01 '13 at 12:28

answered Nov 23 '12 at 08:25

itsme

48,972
96
224
345

@merv sincerily i never got troubles with carousel, it's just to follow what the bootstrap doc says – itsme Apr 27 '13 at 06:55
Obviously the time on my first comment indicates that it referred to the original edit of your answer, which did have bad info. While the later revision is more correct I still don't understand why the mention of artificially triggering events is included. – merv Apr 27 '13 at 10:51
I've found that if you set one of the img items with class="active" you don't need to use that trick with triggering the next slide. – MegaTux Jul 26 '13 at 19:24
@MegaTux yeah true, just use that indeed, 'my' trick is not needed, carousel starts by default, then class=active sets which is the first image you want to show ;) – itsme Jul 26 '13 at 19:25
Thank you! Your *bruteforce* triggering Method is super awesome! – Suresh Karia Aug 05 '14 at 10:20
@Eirenaios well it should be not-needed :P anyway glad that it helps ;) – itsme Aug 05 '14 at 11:24
1

@Eirenaios - it is anything but super awesome. if you need it, it just conceals another problem in your code. if so, you should fix the original problem instead of covering up your mess with a trick. trust me, it will come back to bite you. it ALWAYS does. – katzenhut Nov 03 '14 at 14:04
oh u r a genius you saved me.. Awesome solution. Thanks a lot +1 – Amith Apr 03 '15 at 08:41

Dan · Answer 2 · 2014-04-15T19:29:42.937

24

Simple. You're missing the "data-ride" attribute in the div.

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

edited Apr 15 '14 at 19:29

answered Apr 02 '14 at 14:11

Dan

371
2
4

1

liked the css approach. – joy Apr 09 '14 at 21:07

merv · Answer 3 · 2012-11-23T20:32:17.237

8

As per the docs, you need to initialize the Carousel plugin via JavaScript. The carousel example on the official Bootstrap documentation page is initialized in the application.js file on lines 67-68:

// carousel demo
$('#myCarousel').carousel()

which gives it the default settings.

If you want to specify the cycle interval, you can set the interval property in milliseconds:

$('.carousel').carousel({
  interval: 2000
})

edited Nov 23 '12 at 20:32

answered Nov 23 '12 at 20:13

merv

67,214
13
180
245

Being a wholly relevant answer with accurate information supported by an appropriate amount of background info, this should be the accepted answer. – danmux Apr 26 '13 at 07:19

score 6 · Answer 4 · answered May 07 '13 at 10:40

6

Put it in the document-ready-block make it auto-start for me

$(document).ready(function() {
$('#myCarousel').carousel();
});

answered May 07 '13 at 10:40

Panuwizzle

111
1
5

score 3 · Answer 5 · answered Mar 08 '16 at 13:21

<div id="myCarousel" class="carousel slide" data-ride="carousel"> works for me, what I have been missing was the data-ride attribute.

I hope this will help a lot of people. Thank you stackoverflow, you have been very useful to me on most grounds. Am glad this community exists.

score 2 · Answer 6 · edited Mar 23 '19 at 15:31

2

Just add data-interval="5000" to the div with the IP carouselExampleIndicators.

Like this:

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="5000">

edited Mar 23 '19 at 15:31

double-beep

5,031
17
33
41

answered Mar 23 '19 at 14:57

2567910

144
5

score 1 · Answer 7 · answered Jun 10 '15 at 14:45

1

You can use the data-interval attribute on the html markup to auto play:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"  data-interval="5000">

data-interval: The amount of time in milliseconds to delay between automatically cycling an item. If false, carousel will not automatically cycle.

answered Jun 10 '15 at 14:45

Juan Jimenez

5,812
6
28
37

I am facing an issue with my carousel even tho I have used the above setting..its not coming as desired and initially not initaiting the carousel – SemperFi Aug 09 '16 at 12:02

score 1 · Answer 8 · answered Aug 24 '15 at 22:54

1

<header id="myCarousel" class="carousel slide">

YOU NEED ADD

data-ride="carousel"

<header id="myCarousel" class="carousel slide" data-ride="carousel">

answered Aug 24 '15 at 22:54

Николай Шеломенцев

19
3

score 1 · Answer 9 · answered Jan 21 '20 at 15:10

1

For Bootstrap 4 and onwards:

$(function(){
    $('.carousel').carousel({
      interval: 2000,
      ride: 'carousel' // this is the important part
    });
});

answered Jan 21 '20 at 15:10

FooBar

5,752
10
44
93

score -3 · Answer 10 · answered Apr 09 '13 at 14:14

-3

Simply add the class "slide" to the carousel div tag, like this:

<div class="carousel slide" id="this-carousel-id">

answered Apr 09 '13 at 14:14

Ben

1

-1 That only enables css transition functionality, but still does not initialize the Carousel plugin, which is what is required. – merv Apr 10 '13 at 18:27

Twitter Bootstrap Carousel autoplay on load

10 Answers10

Linked