Bootstrap carousel autoplay on page load

[JooMan]

Hello!

 

I'm using Bootstrap's carousel on the front page of my schools site. It works fine and is responsive etc, only I can't seem to get it to autoplay on page load, I've tried quite a few hacks, but to no avail. Any ideas where I'm going wrong?

 

Here's my code:

 

Javascript:

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

CSS:

.carousel .item {
 max-height: 650px;
}

.item img {
   position: relative; 
   top: 0;
   left: 0;
}

 

HTML:

   
     
               
         /images/Slider/Results_Slide-1.jpg
         
           
             One more for good measure.
             

             GCSE Results
           
         
       

               
         /images/Slider/slide_one.jpg
         
           
             Example headline.
             
 
             Sign up today
           
         
       

               
         /images/Slider/slide_two.jpg
         
           
             Another example headline.
             
 
             Learn more
           
         
       

       
         /images/Slider/slide_three.jpg
         
           
             One more for good measure.
             
 
             Browse gallery
           
         
       
     
     ‹
     ›
   

[ThomL]

Any issue showing in the developer console or any alerts etc?

 

Looks like you're hotlinking for your Library to a wordpress blog? This can't be best practice can it?

And there's an issue with the way you're calling the carousel Function:

Is this any help?

Edited March 17, 2017 by ThomL

[JooMan]

Yeah, I just saw the "Uncaught TypeError: $(...).carousel is not a function" error, that gives me something to look into.

 

Not sure where links to a wordpress blog have come from, I'll look into that too, thanks!

[JooMan]

I managed to fix the carousel function error, the WP links and a few other errors.

 

Carousel still isn't autoplaying. Will give it another shot on Monday.

[ThomL]

from what i had quickly read of the documentation as long as you had the code referenced as needed it was as easy as adding an autoplay class of active or something similar i believe ? I'd say give the latest bootstrap documentation a read/re-read.

[SimonHooker]

I used your code and put it into a JSFiddle, and it seems to work as intended. Have had to comment out the images, and have cleaned the JS a little, but you can see it operational here: https://jsfiddle.net/ghup9z5z/2/

 

Have you got the correct Bootstrap + jQuery libraries included? The fact .carousel is not defined indicates you may be using a build of bootstrap that does not include the JS components. Hotlinking to the CDN as I did in that example is common practise and helps ensure they are cached as users go through other sites that also link to the CDN.

Edited March 21, 2017 by SimonHooker

[JooMan]

Many thanks, that's a great help!

 

I think the problem seems to be, that the site is running on Bootstrap 2.3.2 and I'm yet to spend the time migrating to v3 (yes I know v4 is out soon). With so many class changes, it's not that easily backward compatible.

[SimonHooker]

Carousel does exist in 2.x though, and works the same way ( https://jsfiddle.net/ghup9z5z/10/ - example updated to 2.3.2 )

 

Maybe the JS isn't loading correctly, or isn't somehow loaded before page load hence not being there for the document ready call.

[JooMan]

Ok, I've got it to work with v2, but that's taken my newsticker off, they must have some conflicting code in the script somewhere.

[SimonHooker]

How is your newsticker being initialised? If it is using older javascript, it may be hooking into something that bootstrap/jquery overwrites.