New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Carousel does not automatically start cycling #7508

Closed
rononiwu opened this Issue Apr 8, 2013 · 13 comments

Comments

Projects
None yet
9 participants
@rononiwu

rononiwu commented Apr 8, 2013

The carousel does not start automatically unless I click on one of the indicators.
I simply want the carousel to start once a user navigates to the page.
I also did not make any changes to the .js files
Here is a link to my code
http://pastebin.com/tLb1g00p

@benja2729

This comment has been minimized.

Show comment
Hide comment
@benja2729

benja2729 Apr 8, 2013

I've been using $('[data-slide-to=0]').trigger('click'); as a hack around this until/if it is addressed. Hope it helps.

benja2729 commented Apr 8, 2013

I've been using $('[data-slide-to=0]').trigger('click'); as a hack around this until/if it is addressed. Hope it helps.

@rononiwu

This comment has been minimized.

Show comment
Hide comment
@rononiwu

rononiwu Apr 8, 2013

Unfortunately the project I am using it for will not allow user interaction.Clicking to start will not be a viable option

rononiwu commented Apr 8, 2013

Unfortunately the project I am using it for will not allow user interaction.Clicking to start will not be a viable option

@benja2729

This comment has been minimized.

Show comment
Hide comment
@benja2729

benja2729 Apr 8, 2013

Let me be more specific. In your template file add this:

<script>
  $('[data-slide-to=0').trigger('click');
</script>

This will simulate a click on anything with a data-slide-to attribute and a value of 0; which you do in your sample code. This will cause the built-in data api to kick in and start cycling on page load. No user interaction necessary, just proper template set-up.

Though this does work it isn't a solution. The data api implies that it will start cycling on load because you can set data-interval to false causing no automatic cycling.

benja2729 commented Apr 8, 2013

Let me be more specific. In your template file add this:

<script>
  $('[data-slide-to=0').trigger('click');
</script>

This will simulate a click on anything with a data-slide-to attribute and a value of 0; which you do in your sample code. This will cause the built-in data api to kick in and start cycling on page load. No user interaction necessary, just proper template set-up.

Though this does work it isn't a solution. The data api implies that it will start cycling on load because you can set data-interval to false causing no automatic cycling.

@quasipickle

This comment has been minimized.

Show comment
Hide comment
@quasipickle

quasipickle Apr 10, 2013

The carousel does automatically start if properly set up. I'd try to simplify your markup as much as possible until it works, then build it back up again. I do believe you have to manually call .carousel() to initialize it.

quasipickle commented Apr 10, 2013

The carousel does automatically start if properly set up. I'd try to simplify your markup as much as possible until it works, then build it back up again. I do believe you have to manually call .carousel() to initialize it.

@benja2729

This comment has been minimized.

Show comment
Hide comment
@benja2729

benja2729 Apr 10, 2013

True, that would work as well, but calling the .carousel() function directly negates any of the data attributes set in the markup.

benja2729 commented Apr 10, 2013

True, that would work as well, but calling the .carousel() function directly negates any of the data attributes set in the markup.

@rononiwu

This comment has been minimized.

Show comment
Hide comment
@rononiwu

rononiwu Apr 23, 2013

I still was unable to resolve this. I have tried re writing from scratch and adding calls to auto start the carousel but It does not work.

rononiwu commented Apr 23, 2013

I still was unable to resolve this. I have tried re writing from scratch and adding calls to auto start the carousel but It does not work.

@tomjessessky

This comment has been minimized.

Show comment
Hide comment
@tomjessessky

tomjessessky May 19, 2013

I use < body onload="$('#myCarousel').carousel()"> to start the carousel automatically.

tomjessessky commented May 19, 2013

I use < body onload="$('#myCarousel').carousel()"> to start the carousel automatically.

@fat

This comment has been minimized.

Show comment
Hide comment
@fat

fat May 25, 2013

Member

actually @quasipickle is right… by design the carousel is closer to scrollspy… in that really it should be initialized with js… that said i'll add an onload check into 3.0.0 like we did with scrollspy.

Member

fat commented May 25, 2013

actually @quasipickle is right… by design the carousel is closer to scrollspy… in that really it should be initialized with js… that said i'll add an onload check into 3.0.0 like we did with scrollspy.

@fat

This comment has been minimized.

Show comment
Hide comment
@fat

fat May 25, 2013

Member

added data-ride=carousel for 3.0.0 7cbb1c0

Member

fat commented May 25, 2013

added data-ride=carousel for 3.0.0 7cbb1c0

@greenwe

This comment has been minimized.

Show comment
Hide comment
@greenwe

greenwe Jun 19, 2013

Ok for those of you still having this issue. I tried all of the above and it did not work. FINALLY after pasting this after my carousel it worked on the page load. This was from one of the demo pages. 5 hours wasted but I am sure it is documented somewhere and I believe was mentioned above for people who know more coding than me but I needed the whole snippet.

<script>
  !function ($) {
    $(function(){
      // carousel demo
      $('#myCarousel').carousel()
    })
  }(window.jQuery)
</script>

greenwe commented Jun 19, 2013

Ok for those of you still having this issue. I tried all of the above and it did not work. FINALLY after pasting this after my carousel it worked on the page load. This was from one of the demo pages. 5 hours wasted but I am sure it is documented somewhere and I believe was mentioned above for people who know more coding than me but I needed the whole snippet.

<script>
  !function ($) {
    $(function(){
      // carousel demo
      $('#myCarousel').carousel()
    })
  }(window.jQuery)
</script>
@adamhopkinson

This comment has been minimized.

Show comment
Hide comment
@adamhopkinson

adamhopkinson Jul 12, 2013

@greenwe, @fat that's a workaround. The Bootstrap site says:

You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript

So you should be able to start the carousel using data attributes alone. The fix #3528 does resolve the issue, but isn't included until v3. If you don't want v3 for some reason (mobile first, etc) then this needs retrospectively adding. Can it go in v2.3.3?

adamhopkinson commented Jul 12, 2013

@greenwe, @fat that's a workaround. The Bootstrap site says:

You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript

So you should be able to start the carousel using data attributes alone. The fix #3528 does resolve the issue, but isn't included until v3. If you don't want v3 for some reason (mobile first, etc) then this needs retrospectively adding. Can it go in v2.3.3?

@saintger

This comment has been minimized.

Show comment
Hide comment
@saintger

saintger Aug 4, 2013

For me the reference carousel doesn't start cycling automatically on Firefox 18:
http://examples.getbootstrap.com/carousel/index.html

If I click on the next slide or initialize through a <script>, it works.

saintger commented Aug 4, 2013

For me the reference carousel doesn't start cycling automatically on Firefox 18:
http://examples.getbootstrap.com/carousel/index.html

If I click on the next slide or initialize through a <script>, it works.

@sjewo

This comment has been minimized.

Show comment
Hide comment
@sjewo

sjewo Oct 21, 2013

Backporting 7cbb1c0 to v2.3.3 worked for me.

sjewo commented Oct 21, 2013

Backporting 7cbb1c0 to v2.3.3 worked for me.

MarceloBasemix added a commit to rafapires/souza-aranha that referenced this issue Oct 30, 2013

@twbs twbs locked and limited conversation to collaborators Jun 14, 2014

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.