Menu Carousel vs. ShowSlides
 

Carousel vs. ShowSlides

The Carousel and ShowSlides functions are very similar. They come from different sources but look very similar. They probably both came from examples on W3CSchools.

There are two scripts running on this page. The point is to stop them interfering with each other. There is a lot going on here!

The Carousel - Automatic Slideshow

Uses the carousel() function

The Slideshow - Manual

Uses the showSlides() and starts with the plusSlides() functions

There are two sets (classes) of slides above, myslides and myslides2, there is an interaction when I try to combine them (as in the storyboard control)

Top

I initially thought that I should be able to run a slideshow/carousel on this page using both the same functions. The html code for both versions used an image element with the classname = "mySlides". Looking at my code this (class) is not constructed (defined) anywhere, the only reference I can find is from another example of W3C.

The showSlides() function looped through an array of "dots" - which I don't need to be displayed.

Further analysis

The array of "dots" and the "caption text" on the controlled slideshow are not needed.

The additional functions plusSlides(x) (which is used to advance and retard the display) and the functions setIntervalf() and setIntervals() are used to speed-up and slow-down the slideshow.

In my attempt at getting this to work I seperated out the two versions of the carousel/shideshow. To do this I created two sets of slides using images that indicated what slide was being displayed. I also displayed them using w3-half containers. I also seperated the two scripts for the control of each set of slides.

The scripts are still very similar and I am still of the opinion that I could probably combine their functionality. In most cases the application will either be a manual or an automatic display.

A "Pause" function is still to be implemented - to now I can simulate it by setting the interval to a high number.

Compared to the WAI example my code is a lot simpler and uses JavaScript that at least I understand. If I were concerned with Accessibility issues I may want to look again at the code. My review of many of the slideshows that I see presented on major photo sites, such as Flicker, and other solutions offered by CMS packages leads me to conclude that my solution is not bad.

Often I find that I slideshows do not allow enough control to display the image that is of interest.

This page also uses the element.innerHTML property to display what the current slide interval is set to. I need to extend this to the display of the slide number (without having to hard code 1/4, 2/4 etc). This will allow the addition of images/slides without having to re-code the caption on exisiting images.

You are about to leave this website.

tempusfugit.me.uk is a non-commercial website. No payment or benefit is gained by the placement of links to other websites.



Visit:- Go to Website

Links

External

Site design by Tempusfugit Web Design -