Timing in Carousels

[Mandolin_Tim]

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..

[B i r n o u]

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/

[osgood_]

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.

[B i r n o u]

well, you're right so

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

V4 : https://getbootstrap.com/docs/4.6/components/carousel/

others docs https://getbootstrap.com/docs/versions/

[B i r n o u]

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

[Mandolin_Tim]

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.

[osgood_]

Assuming you are using Bootstrap version 4 you would include the <script></script> tag below at the bottom of your page code, where the carousel is hosted, directly before the closing </body> tag:

<script>

$('.carousel'.carousel({

interval: 5000

});

</script>

For Bootstrap version 5:

<script>

let myCarousel = document.querySelector('.carousel')
let carousel = new bootstrap.Carousel(myCarousel, {
interval: 5000
})

</script>

[B i r n o u · Accepted solution]

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.

[Nancy OShea · Accepted solution]

...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.

[B i r n o u]

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

By @Nancy OShea

adding them separatly, allows to set different interval to each slides, adding them to the main container get the 'main 'default' value, so adding them separatly is (for what I think, a better way to go

[Nancy OShea]

adding them to the main container get the 'main 'default' value

==========

Unexpressed, the data-interval on the carousel container is 5000 milliseconds for all slides.  When expressed, the container assumes the new value  -- whatever that may be.

https://getbootstrap.com/docs/4.1/components/carousel/#crossfade

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...

[B i r n o u]

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.

[osgood_]

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'.

[Mandolin_Tim]

Sorry, an inconsistent time between slides is the easiest way of making sure it is working, nothing more.  On top of this I am doing it purely for my own use, not a client, so I won't be driving anybody other than myself crazy and the carousel was driving me crazy in Dreamweaver by running every 5 secs while I was trying to build the page.

[osgood_]

Use whatever timing you like whilst in producion, a whole day between slides if thats what you need. Lack of knowledge and regular coding is responsible for driving you crazy, using Bootstrap isnt going to help much. I appreciate youre an amatuer and as such you have to stumble your way around which l understand must be hugely frustrating.

[B i r n o u]

 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 ...

[Nancy OShea]

Hi @Mandolin_Tim,

Open the Snippets Panel and add a data-interval to Bootstrap Carousel.  See screenshot.  Snippets are reusable bits of code.

https://helpx.adobe.com/dreamweaver/using/reuse-code-with-snippets.html

[Nancy OShea]

Next job is to get access to a database through some Perl scripts...

=========

Perl was replaced with PHP ages ago.  Nobody uses Perl much anymore.  PHP is better.  See this Extension from WebAssist.

http://www.webassist.com/dreamweaver-server-behaviors

[Mandolin_Tim]

That may be but it works fast and easy on the server I use and having done most of the i/face work in Perl I still understand it.  I'm fast approaching the time when I don't want to learn 'yet another language' to use once every 4 years when I update my own sites rather than a site a week.  I'm a hobby programmer and I suspect there are many out there.  DW was fine when I converted to using it as a means of keeping one or two personal sites going as it didn't change the HTML code I was using unlike many others.  Now it is approaching the point where I will go back to writing my own HTML code to keep things going but that wasn't the original point of this thread.

As to the real point, I now know how to change the timing, thanks, however, DW now seems to be doing strange things with the sizing of the images shown in the carousel (squashing them severely width wise) for 3 of the 5 being shown despite no changes to the overall size of the carousel or to the dimensions of each image but perhaps that should also be the subject of another thread?

<div class="carousel-inner">
<div class="align-content-lg-start">
    
<!--Carousel items referenced  -->    
<div class="carousel-item active">    
<img src="Images/Applecross.jpg" alt="Loch side, Applecross" width="1000" height="367" class="d-block w-100" data-interval="20000" data-pause="hover"> </div>

<div class="carousel-item"> 
<img src="Images/Cajarc_from_Air.jpg" alt="Cajarc from air" width="1000" height="367" class="d-block w-100" data-interval="20000"> </div>

<div class="carousel-item"> 
<img src="Images/Flotsam.jpg" alt="Flotsam in NW US" width="1000" height="367" class="d-block w-100" data-interval="20000"> </div>

<div class="carousel-item"> 
<img src="Images/Bled.jpg" alt="Lake Bled, Serbia" width="1000" height="367" class="d-block w-100" data-interval="10000"> </div>

<div class="carousel-item"> 
<img src="Images/Firth_ofthe_Forth.jpg" alt="Firth of the Forth" width="1000" height="370" class="d-block w-100" data-interval="10000"> </div>

<div class="carousel-item"> 
<img src="Images/Glacier_Parkway.jpg" alt="Glacier Parkway" width="1000" height="370" class="d-block w-100" data-interval="20000" data-pause="hover"> </div>
</div>
    
<!--Pevious and Next arrows.-->
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> 
    <span class="carousel-control-prev-icon" aria-hidden="true"></span> 
    <span class="sr-only">Previous</span> 
</a> 
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> 
    <span class="carousel-control-next-icon" aria-hidden="true"></span> 
    <span class="sr-only">Next</span> 
</a> 
<!-- end of arrow def -->
</div>
<!--end of Carousel-->

(My commenting throughout)

I'm pretty sure the data-interval="x" is correctly applied for each item though this is also not showing up in either the "live view" or when I look at in Firefox which is my browser of choice.  More scratching of head and searching through the bootstrap file just to make sure it hasn't been changed, perhaps easiest to drag it back in to the local system, again.  Mind you I also included the 'data-pause' attribute and that works a treat, maybe I did alter the .css file, silly me.  I have learnt several things through this - will I remember them the next time I update the site in 2025?

[B i r n o u]

you placed the data-inteval in the IMG tag, it has to be placed above, on the DIV tag the one having the caroussel-item class

give it a try and tell us

[B i r n o u]

Now it is approaching the point where I will go back to writing my own HTML code to keep things going but that wasn't the original point of this thread.

By @Mandolin_Tim

although DW can be a good code editor, especially in the upstream versions of the Bracket integration... there are plenty of editors available, out there.

I was since a few years an avid Sublime Text addict, but Ben (Pleysier) introduced me to Visual Studio Code in one of his posts... and I must admit, that with some extensions... (sFTP, node.js tools, PHP debug, Power Shell, to name a few...or see by yourself https://marketplace.visualstudio.com/VSCode  ) , it becomes a formidable tool

[Nancy OShea]

Your code is not set-up right. 

It should be expressed like this where img-fluid is the built-in Bootstrap class for responsive images.  It works best when height & width values are omitted from HTML.

<div class="carousel-item active" data-interval="20000">    
<img classs="img-fluid" src="Images/Applecross.jpg" alt="Loch side, Applecross"> 
</div>

Hopefully your hosting server can still support Perl which is not as secure or robust as it's cousin PHP.  In any case, good luck with your project.  

[Mandolin_Tim]

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.