MDB Carousel > Autoplay not intializing - Material Design for Bootstrap

Topic: MDB Carousel > Autoplay not intializing

surface2air asked 9 years ago

Hi MDB Support, I really like your site, by the way, and I'm learning a lot about MDB and have integrated it with a few recent projects. I am working on a basic 5 slide (cover image) carousel using MDB, but I am not getting the carousel to auto play. I am referring to the demo found here: http://mdbootstrap.com/full-page-carousel/ And on the site I found a reference to the following script to initialize the auto play, but it doesn't kick in for the carousel slider: <script> $('.carousel').carousel(); </script> I was using it at the bottom, but I have also tried renaming the class reference from ('.carousel') to my ID ('#carousel1') but that didn't work either. Much appreciate your help on this! Thanks in advance, Eric eztiki@hotmail.com Seattle, Washington

Add comment

jmona789 answered 9 years ago

0 0 Best answer

I have found it works if you add an interval of how often you want the slide to change(in ms). for example if you want them to change every five seconds you would use this: $('.carousel').carousel({ interval: 5000 }) Also the carousel will pause when you hover the mouse over it. If you want to prevent that you can do $('.carousel').carousel({ interval: 5000, pause: "false" })

Add comment

surface2air answered 9 years ago

0 0 Best answer

Hi jmona789, I cannot seem to get the Carousel to initialize autoplay. It also appears that I have a secondary issue with the Carousel as it appears in mobile displays: the Carousel does not play at all. :( Can I share my project? It's in production here: http://gridinteractive.com/gma/index.htm The Carousel is at the top of the page with 5 slides. There are no other Carousels used here except here at top. Thanks, Eric Seattle, Washington

Add comment

Ilia Shneiderman answered 9 years ago

0 0 Best answer

Hi Surface2air! Let me show you that in your script try: $('#carousel1').carousel(... and put down of page the script

Add comment

surface2air answered 9 years ago

0 0 Best answer

Hi Ilia, Thanks, yes, I have applied the following script with the unique ID ('#carousel1') for the carousel, but the carousel does not play until the controls are clicked:

<script> $('#carousel1').carousel({ interval: 5000, pause: “false” }) </script>

This script appears at page bottom. On mobile displays, the carousel does not play. Here's my project in production page: http://gridinteractive.com/gma/index.htm Thanks! Eric Seattle, Washington

Add comment

Ilia Shneiderman answered 9 years ago

0 0 Best answer

Hi Eric! As I see from my PC, first Main bug on your page is: Failed to load resource: the server responded with a status of 404 (Not Found) witn js/mdb.js After then: Uncaught ReferenceError: $ is not defined (probably mismatch version of JQuery and missing mdb.js) WBW Illia

Add comment

surface2air answered 9 years ago

0 0 Best answer

Hi Ilia, Yes, thanks for catching these missing resources! I have added them yesterday to my project, which I am staring at a lot of code, so I greatly appreciate having another set of eyes on this. However, the Carousel on the home page does not initialize - even with the missing mdb.js file resourced now in the project. It also does not play on mobile displays, but it will on larger displays once the controls have been clicked. Is there something else I might be missing? It seems like I have it all here. Thanks, Eric Seattle, Washington

neo pro commented 7 years ago

does anyone have the answer for this? this question was from a year ago and today on this day this exact same issue is what i'm having to deal with

Add comment

neo pro answered 7 years ago

0 1 Best answer

hi surface2air, did you ever get this to work?

Add comment

neo pro answered 7 years ago

0 0 Best answer

how do we delete these guys who are wasting our time and trying to advertise their company instead of answering the question...we have Jeiarty and Adriaty advertising something that has nothing to do with the question

Dawid Adach pro commented 7 years ago

Already removed

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

User: Free
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

surface2air

47Support score
20Questions 12Answers

0Snippets likes 0Snippets