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

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

    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. Is there a way to modify the bootstrap file (or local stylesheet) to make a default for all slides rather than have to include the value for all carousel-items?  Maybe I just need to read the documentation properly...

     

    Mind you the links will be very useful and are now book marked permanently.  Still coming to term with some of the changes since I last used DW about 3 years ago which have caused me to modify some webpages.  Next job is to get access to a database now in MariaDB through some Perl scrips that at least used to work fine.


    quote

     Is there a way to modify the bootstrap file (or local stylesheet)


    By @Mandolin_Tim

     

    as much as possible, do not modify the libraries provided by third party providers ... possibly make a fork on their GitHub, but as soon as the original creamery will be updated you will have to start again, or merge your additions with the updates ...

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