W3.CSS Slideshow

---

---

Manual Slideshow

Displaying a manual slideshow with W3.CSS is very easy.

Just create many elements with the same class name:

And two buttons to scroll the images:

And add a JavaScript to select images:

JavaScript Explained

First, set the slideIndex to 1. (First picture)

Then call showDivs() to display the first image.

When the user clicks one of the buttons call plusDivs().

The plusDivs() function subtracts one or  adds
one to the slideIndex.

The showDiv() function hides (display="none")
all elements with the class name "mySlides", and displays (display="block")
the element with the given slideIndex.

If the slideIndex is higher than the number of elements (x.length),
the slideIndex is set to zero.

If the slideIndex is less than 1 it is set to number of elements
(x.length).

---

---

Automatic Slideshow

To display an automatic slideshow is even simpler.

You only need a little different
JavaScript:

---

HTML Slides

The slides do not have to be images.

They can be any HTML content:

---

Slideshow Caption

Add a caption text for each image slide with the w3-display-*
classes (topleft, topmiddle, topright, bottomleft, bottommiddle, bottomright,
left, right or middle):

---

Slideshow Indicators

An example of using buttons to indicate how many slides there are in the slideshow, and which slide the user is currently viewing.

Another example:

---

Images as Indicators

An example of using images as indicators:

---

Multiple Slideshows on the Same Page

To operate multiple slideshows on one page, you must class the members of
each slideshow group with different classes:

---

Animated Slides

Slide or fade in an element from the top, bottom, left or right of the screen with the w3-animate-* classes.

---

Faded Animation

The w3-animate-fading class fades an element in and out (takes about 10 seconds).

// First automatic slideshow (band photos)
var myIndex = 0;
carousel();

function carousel() {
var i;
var x = document.getElementsByClassName("mySlides6");
for (i = 0; i x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 2000);
}

// Second automatic slideshow (html slides)
var slideIndex = 0;
carousel2();

function carousel2() {
var i;
var x = document.getElementsByClassName("mySlides7");
for (i = 0; i x.length) {slideIndex = 1}
x[slideIndex-1].style.display = "block";
setTimeout(carousel2, 3000);
}

// First manual slideshow
var slideIndexMan = 1;
showDivs(slideIndexMan);

function plusDivs(n) {
showDivs(slideIndexMan += n);
}

function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndexMan = 1}
if (n < 1) {slideIndexMan = x.length}
for (i = 0; i x.length) {slideIndexCap = 1}
if (n < 1) {slideIndexCap = x.length} ;
for (i = 0; i x.length) {slideActiveBtn = 1}
if (n < 1) {slideActiveBtn = x.length} ;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i x.length) {slideBadge = 1}
if (n < 1) {slideBadge = x.length} ;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i x.length) {slideImgInd = 1}
if (n < 1) {slideIndex = x.length} ;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-opacity-off", "");
}
x[slideImgInd-1].style.display = "block";
dots[slideImgInd-1].className += " w3-opacity-off";
}

// Range rovers automatic animations
var RoverIndex = 0;
RoverCarousel();

function RoverCarousel() {
var i;
var x = document.getElementsByClassName("myRover");
for (i = 0; i x.length) {RoverIndex = 1}
x[RoverIndex-1].style.display = "block";
setTimeout(RoverCarousel, 3000);
}

// Range rover fading animate
var fadeRover = 0;
fadeCarousel();

function fadeCarousel() {
var i;
var x = document.getElementsByClassName("myFading");
for (i = 0; i x.length) {fadeRover = 1}
x[fadeRover-1].style.display = "block";
setTimeout(fadeCarousel, 9000);
}