Skip to main content
Mandolin_Tim
Mandolin_Tim
Participating Frequently
October 16, 2021
Answered

Timing in Carousels

  • October 16, 2021
  • 2 replies
  • 2594 views

Should be easy but I can't seem to find any references to changing the length of time that an image in a carousel shows before moving to the next.  Default seems to be around 5 secs but I wish to make it somewhat longer (20s?).  Looked in all sorts of areas of properties within DW but cannot find the one I want (or screen, or input box...).  Looked all around this community for a similar question that might help to no avail, at least cannot find anything with what I would think would be the obvious words in the search either in DW community of woth Google ie timing carousel etc...

 

Where do I look?

 

Thanks

Tim..

 

 

    This topic has been closed for replies.
    Correct answer Nancy OShea
    quote

    Thanks very much,  eventually found that not long after I posed the question (always the way!) and used that but it didn't seem to change the length of time the image remains on the screen assuming 5000 = 5 secs which I think is the default.


    By @Mandolin_Tim

     

    where did you add the dat-interval attribut, pay attention that in BS 4 you have to add it on each caroussel-ietm oindependently...

     

    Add data-interval="" to a .carousel-item to change the amount of time to delay between automatically cycling to the next item.

     


    quote...in BS 4 you have to add it on each carousel-item independently...

    ==========

    @B i r n o u,

    I've never needed to do that.  This works as intended in Firefox & Chrome.  Try it.  🙂

     

    <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="7000">

     

     

    @Mandolin_Tim,

    The default data-interval is 5000 milliseconds.

    • < 5000 = faster. 
    • 5000 > = slower.
    • To test it, refresh your browser.

     

    2 replies

    Mandolin_Tim
    Mandolin_TimAuthor
    Participating Frequently
    October 17, 2021

    If I have marked the wrong reply as the correct one it is my fault, couldn't work out which tick should be pressed and both Birnou and Nancy helped out.  Thanks alot.

    B i r n o u
    B i r n o u
    Legend
    October 16, 2021

    I suppose that you use the Bootsrap caroussel componet, if that is the case, add a data-interval property to the TAG (generally a DIV) that contains the caroussel class.

     data-interval="20000"

    now if you launch the carrousel using Javascript add the property in the launching object

    $('#yourcaroussel_id').carousel({
  interval: 20000
});

    any way... get the doc always close to you

    https://getbootstrap.com/docs/5.1/components/carousel/

    O
    osgood_
    Legend
    October 16, 2021

    Thats the link to Bootstrap v5 - assuming the OP is using Bootystrap via DW that would be v4, unless ive missed the update to v5.

     

     

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices