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

Timing in Carousels

  • October 16, 2021
  • 2 replies
  • 2612 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/

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

    https://getbootstrap.com/docs/4.6/components/carousel/#individual-carousel-item-interval

    O
    osgood_
    Legend
    October 17, 2021
    quote

    I can't think of a scenario where extra code on each item and inconsistent transitions would be "a better way to go" but whatever...

    By @Nancy OShea

     

    several studies show that, after the first slide, users do not click on carousels. Moreover, messages are not always of the same importance in terms of reading time.


    It is therefore relatively easy to understand that we must play on the display time taking into account these findings, and thus assigning a distinct interval for each slide is a flexibility of control that I can not do without.


    Really, inconsistant intervals between slides, that would drive me nuts as a user. Its like a random approach and personally l dont think it a good approach unless your app is some kind of a 'shoot me up game'.

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