TSmooth40

Okay thanks!

No I haven't tried Dsonesuk's yet. The code is in a different environment, which means I have to hand code everything in. Yours is a lot shorter than Dsonesuk's code.

What is the CSS you're using?

davej,

When the page is initially rendered all of the images are visible, until I click on the arrow to change the image. However when the page is on one image it does not render to the next image. The displayed image continues to fade in and out, not changing to the next imagine.

What am I missing or overlooking?

Thanks!

davej,

I am also used the HTML that changes the images manually.

Thanks!

<a class="w3-btn-floating" onclick="plusDivs(-1)">❮</a>
<a class="w3-btn-floating" onclick="plusDivs(+1)">❯</a>

davej,

I used the following HTML.

Thanks!

<img class="mySlides" src="img_fjords.jpg">
<img class="mySlides" src="img_lights.jpg">
<img class="mySlides" src="img_mountains.jpg">
<img class="mySlides" src="img_forest.jpg">

From W3.CSS Slideshow webpage: http://www.w3schools.com/w3css/w3css_slideshow.asp.

Is there a way where I can utilize both the manual and automatic script within a single slideshow?

I want the slideshow to move automatically as well as have the capability to change the slides manually.

Thanks you for your assistance.

var slideIndex = 1;
showDivs(slideIndex);

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

function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length} ;
for (i = 0; i < x.length; i++) {
x.style.display = "none";
}
x[slideIndex-1].style.display = "block";
}

var slideIndex = 0;
carousel();

function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x.style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
x[slideIndex-1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}