How to change the interval time on bootstrap carousel

Question

I have a bootstrap carousel on my web page  I m trying the increase the time interval between each slide  The default delay of 5000 milliseconds is too fast  I need about 10 seconds

User · Answer

lt div class  quot carousel-inner text-right quot  gt                     lt div class  quot carousel-item active text-center quot  id  quot first quot   data-interval  quot 1000 quot   gt                       lt img src  quot images slide-1 gif quot  alt  quot slide-1 quot  gt                     lt  div gt                     lt div class  quot carousel-item  text-center quot  id  quot second quot   data-interval  quot 2000 quot   gt                       lt img src  quot images slide-2 gif quot  alt  quot slide-2 quot  gt                     lt  div gt                     lt div class  quot carousel-item  text-center quot  id  quot third quot   data-interval  quot 3000 quot   gt                       lt img src  quot images slide-3 gif quot  alt  quot slide-3 quot  gt                     lt  div gt                     lt div class  quot carousel-item text-center quot  id  quot four quot   data-interval  quot 5000 quot   gt                       lt img src  quot images slide-4 gif quot  alt  quot slide-4 quot  gt                     lt  div gt                   lt  div gt   You can also change different slides

User · Answer

You can simply use the data-interval attribute of the carousel class   It s default value is set to data-interval  3000  i e 3seconds   All you need to do is set it to your desired requirements

User · Answer

You can also use the data-interval attribute eg   lt div class  carousel  data-interval  10000  gt

User · Answer

You need to set interval in  main div as data-interval tag           so it is working fine and you can give different time to different slides           lt  --main div -- gt         lt div data-ride  carousel  class  carousel slide  data-interval  100  id  carousel-example-generic  gt     lt  -- Indicators -- gt     lt ol class  carousel-indicators  gt                                   lt li data-target   carousel-example-generic  data-slide-to  0  class    gt  lt  li gt                               i gt                                               lt  ol gt      lt  -- Wrapper for slides -- gt     lt div role  listbox  class  carousel-inner  gt          lt div class  item  gt             lt a class  carousel-image  href     gt              lt img alt  image  src  image jpg  gt             lt  a gt           lt  div gt       lt  div gt    lt  div gt

User · Answer

You can use the options when initializing the carousel  like this      interval is in milliseconds  1000   1 second - gt  so 1000   10   10 seconds     carousel   carousel     interval  1000   10       or you can use the interval attribute directly on the HTML tag  like this    lt div class  carousel  data-interval  10000  gt    The advantage of the latter approach is that you do not have to write any JS for it - while the advantage of the former is that you can compute the interval and initialize it with a variable value at run time

User · Answer

The best way to get rid on it is adding or modifying the data-interval attribute like this    lt div data-ride  carousel  class  carousel slide  data-interval  10000  id  myCarousel  gt    It s specified on ms like it s usually on js  so 1000   1s  3000   3s    10000   10s   By the way you can also specify it at 0 for not sliding automatically  It s useful when showing product images on mobile for example    lt div data-ride  carousel  class  carousel slide  data-interval  0  id  myCarousel  gt

[javascript] How to change the interval time on bootstrap carousel?

Examples related to javascript

Examples related to html

Examples related to css

Examples related to twitter-bootstrap