How to set time out for each W3.CSS picture slideshow? - javascript

I try to use " setTimeout(function,time) " but it doesn't work.
I copy some of code in w3schools.com.(https://www.w3schools.com/w3css/w3css_slideshow.asp)
This is codes of W3.CSS slideshow.
<div class="w3-content w3-display-container" style="max-width:800px;">
<img class="mySlides" src="img/food/pad.jpg"
style="width:100%;cursor:pointer;" onclick="plusDivs(1)">
<img class="mySlides" src="img/food/green_curry.jpeg"
style="width:100%;cursor: pointer;" onclick="plusDivs(1)">
<img class="mySlides" src="img/food/kai.jpg"
style="width:100%;cursor:pointer;" onclick="plusDivs(1)">
<div class="w3-center w3-container w3-section w3-large w3-text-white w3-
display-bottommiddle" style="width:100%">
<div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)" >❮
</div>
<div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">❯</div>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
This is JavaScript code.
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 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-white", "");
}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " w3-white";
}

here is the working code for your problem -
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.mySlides {
display: none
}
</style>
<body>
<div class="w3-container">
<h2>Slideshow Indicators</h2>
<p>An example of using buttons to indicate how many slides there are in the slideshow, and which slide the user is currently viewing.</p>
</div>
<div class="w3-content" style="max-width:800px">
<img class="mySlides" src="https://www.w3schools.com/w3css/img_nature_wide.jpg" style="width:100%">
<img class="mySlides" src="https://www.w3schools.com/w3css/img_fjords_wide.jpg" style="width:100%">
<img class="mySlides" src="https://www.w3schools.com/w3css/img_mountains_wide.jpg" style="width:100%">
</div>
<div class="w3-center">
<div class="w3-section">
<button class="w3-button w3-light-grey" onclick="plusDivs(-1)">❮ Prev</button>
<button class="w3-button w3-light-grey" onclick="plusDivs(1)">Next ❯</button>
</div>
<button class="w3-button demo" onclick="currentDiv(1)">1</button>
<button class="w3-button demo" onclick="currentDiv(2)">2</button>
<button class="w3-button demo" onclick="currentDiv(3)">3</button>
</div>
<script>
var slideIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {
slideIndex = 1
}
x[slideIndex - 1].style.display = "block";
setTimeout(carousel, 5000); // Change image every 5 seconds
}
</script>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {
slideIndex = 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-red", "");
}
x[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " w3-red";
}
</script>
</body>
</html>
Here, setTimeout(function,time) is working fine

Related

how to add auto-play in slider images using w3slider?

I have used a slider. But it slides manually when I click the arrow.
Here is my HTML code:
<div class="w3-content w3-display-container" style="box-shadow: 0px 0px 5px 0px rgba(0,0,0,.3);">
<img class="mySlides" src="img1.png" />
<img class="mySlides" src="img2.png" />
<button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">❮</button>
<button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">❯</button>
</div>
Here is my JS code:
var slideIndex = 1;
showDivs(slideIndex);
plusDivs(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[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
Now I want to add autoplay to slide images.
I have added below code in your javascript and html files -
In script create autoplay variable like this:
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var autoplay = setInterval("plusDivs(-1)", 3000);
if (n > x.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = x.length
}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
autoplay;
}

Javascript function not working well when called for the first time

I'm basically trying to use this code on my page:
https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_dots2
The thing is I want to create that slideshow, but turns out when I load the page for the first time, no images display. When I click on the circles, then an image appears and everything works fine. I get the following error:
Uncaught TypeError: Cannot read property 'style' of undefined
at showDivs (details.js:26)
at details.js:2
Here's the fragment of code for the slideshow:
<div class="w3-content w3-display-container" style="max-width:800px">
<img class="mySlides" src="<c:url value="/resources/pics/casa1.jpg" />" style="width:100%">
<img class="mySlides" src="<c:url value="/resources/pics/casa2.jpg" />" style="width:100%">
<img class="mySlides" src="<c:url value="/resources/pics/casa3.jpg" />" style="width:100%">
<img class="mySlides" src="<c:url value="/resources/pics/casa4.jpg" />" style="width:100%">
<div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
<div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">❮</div>
<div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">❯</div>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(4)"></span>
</div>
</div>
And my details.js
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 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-white", "");
}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " w3-white";
}
When you call your script code directly as you do here, your document might not have loaded completely, so it can't find the element. Try to run your code when the page has finished loading, like this:
window.addEventListener('load', function() {
var slideIndex = 1;
showDivs(slideIndex)
};
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 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-white", "");
}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " w3-white";
}
Make sure that you place your entire <script> element at the bottom of your HTML, just before the closing body tag (</body>). I'll bet that right now, you've got your code prior to the .mySlides HTML so that when the code first runs, none of those elements have been parsed into memory yet.
In addition, your HTML for your src image attributes is invalid for two reasons.
You have double quotes nested inside of double quotes.
You have < and > characters embedded in the attribute value, which is not allowed.
If you really wanted that code in the attribute, the code would need to look like this:
<img class="mySlides" src="<c:url value='/resources/pics/casa4.jpg>'">
But, why are you trying to make the src equal to another tag?
Also, stay far away from W3 Schools as it is widely known to have incomplete, incorrect, and or outdated code there. Your example includes outdated techniques that you really should avoid, like inline HTML event attributes such as onclick and inline styles.
Here's a working version:
.mySlides {height:100px; }
<!doctype html>
<html>
<head>
</head>
<body>
<div class="w3-content w3-display-container" style="max-width:800px">
<img class="mySlides" src="http://cdn.shopify.com/s/files/1/0885/7466/products/smiley-decal_1024x1024.png?v=1434998018">
<img class="mySlides" src="https://imgc.allpostersimages.com/img/posters/have-a-nice-day-smiley-face_u-L-F59IP80.jpg?src=gp&w=300&h=375">
<img class="mySlides" src="https://images-na.ssl-images-amazon.com/images/I/41q0g8iq5iL.jpg">
<img class="mySlides" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQjg89JZEZ2SAr1Qd6b__1RO3XoyaiVJStnzJZ5lqwoD45yKRLp">
<div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
<span class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">❮</span>
<span class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">❯</span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(4)"></span>
</div>
</div>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 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-white", "");
}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " w3-white";
}
</script>
</body>
</html>

JavaScript ReferenceError: x is not defined

I am trying to build a webpage to display some images and when clicked with pop-up a modal with thumbnail images at the bottom. I referenced w3Schools to create this and modified it a bit but now recieve a ReferenceError: currentImg is not defined in the console. When I click on an image the modal pops up but the image does not change when the arrows are clicked. Requesting help to understand the error and how to fix it. Please find below my code.
function openModal() {
document.getElementById('myModal').style.display = "block";
}
function closeModal() {
document.getElementById('myModal').style.display = "none";
}
var slideIndex = 1;
showImgs(slideIndex);
function plusImg(n) {
showImgs(slideIndex += n);
}
function plusImg(n) {
showImgs(slideIndex = n);
}
function showImgs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > x.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = x.length;
}
alert(x.length)
for (i = 0; i < x.length; i++) {
alert(i)
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-opacity-off", "");
}
x[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " w3-opacity-off";
captionText.innerHTML = dots[slideIndex - 1].alt;
}
.s4 img {
height: 413px;
width: 319px;
margin: 0px;
cursor: pointer;
}
#myModal span {
cursor: pointer;
}
.w3-content {
max-width: 1200px;
}
.w3-content .mySlides {
width: 100%;
}
.w3-content .w3-col {
padding: 5px;
}
.demo {
width: 100%;
}
<head>
<title>Commander, Carrier Strike Group ELEVEN (CCSG 11) Fact Sheet</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
</head>
<body>
<div class="w3-container">
<div class="w3-row-padding">
<div class="w3-col s4">
<img src="https://www.public.navy.mil/surfor/ccsg11/PublishingImages/FactSheet_Page1.jpg" onclick="openModal();currentImg(1)" class="w3-hover-shadow">
<img src="https://www.public.navy.mil/surfor/ccsg11/PublishingImages/FactSheet_Page2.jpg" onclick="openModal();currentImg(2)" class="w3-hover-shadow">
<img src="https://www.public.navy.mil/surfor/ccsg11/PublishingImages/FactSheet_Page3.jpg" onclick="openModal();currentImg(3)" class="w3-hover-shadow">
<img src="https://www.public.navy.mil/surfor/ccsg11/PublishingImages/FactSheet_Page4.jpg" onclick="openModal();currentImg(4)" class="w3-hover-shadow">
<img src="https://www.public.navy.mil/surfor/ccsg11/PublishingImages/FactSheet_Page5.jpg" onclick="openModal();currentImg(5)" class="w3-hover-shadow">
</div>
</div>
<div id="myModal" class="w3-modal w3-black" style="display: block;">
<span class="w3-text-white w3-xxlarge w3-hover-text-grey w3-container w3-display-topright" onclick="closeModal()">×</span>
<div class="w3-modal-content">
<div class="w3-content">
<img class="mySlides" src="https://www.public.navy.mil/surfor/ccsg11/PublishingImages/FactSheet_Page1.jpg" style="display: block;">
<img class="mySlides" src="https://www.public.navy.mil/surfor/ccsg11/PublishingImages/FactSheet_Page2.jpg" style="display: none;">
<img class="mySlides" src="https://www.public.navy.mil/surfor/ccsg11/PublishingImages/FactSheet_Page3.jpg" style="display: none;">
<img class="mySlides" src="https://www.public.navy.mil/surfor/ccsg11/PublishingImages/FactSheet_Page4.jpg" style="display: none;">
<img class="mySlides" src="https://www.public.navy.mil/surfor/ccsg11/PublishingImages/FactSheet_Page5.jpg" style="display: none;">
<div class="w3-row w3-black w3-center">
<p id="caption">Page 1</p>
<span class="w3-display-left w3-btn" onclick="plusImg(-1)"><</span>
<span class="w3-display-right w3-btn" onclick="plusImg(1)">></span>
</div>
<div class="w3-col s4">
<img class="demo w3-opacity w3-hover-opacity-off w3-opacity-off" src="https://www.public.navy.mil/surfor/ccsg11/PublishingImages/FactSheet_Page1.jpg" onclick="currentImg(1)" alt="Page 1">
</div>
<div class="w3-col s4">
<img class="demo w3-opacity w3-hover-opacity-off" src="https://www.public.navy.mil/surfor/ccsg11/PublishingImages/FactSheet_Page2.jpg" onclick="currentImg(2)" alt="Page 2">
</div>
<div class="w3-col s4">
<img class="demo w3-opacity w3-hover-opacity-off" src="https://www.public.navy.mil/surfor/ccsg11/PublishingImages/FactSheet_Page3.jpg" onclick="currentImg(3)" alt="Page 3">
</div>
<div class="w3-col s4">
<img class="demo w3-opacity w3-hover-opacity-off" src="https://www.public.navy.mil/surfor/ccsg11/PublishingImages/FactSheet_Page4.jpg" onclick="currentImg(4)" alt="Page 4">
</div>
<div class="w3-col s4">
<img class="demo w3-opacity w3-hover-opacity-off" src="https://www.public.navy.mil/surfor/ccsg11/PublishingImages/FactSheet_Page5.jpg" onclick="currentImg(5)" alt="Page 5">
</div>
</div>
</div>
</div>
</div>
</body>
You have 2 functions with name plusImg.
Just rename second one to currentImg
function plusImg(n) {
showImgs(slideIndex += n);
}
function plusImg(n) {
showImgs(slideIndex = n);
}
There are some issues in your javascript codes:
there is missing function for currentImg
function currentImg(n) {
console.log(n);
showImgs(n);
}
there is duplicate plusImg function, please remove the 2nd one
there is error in showImgs function, please check my update js codes
function openModal() {
document.getElementById('myModal').style.display = "block";
}
function closeModal() {
document.getElementById('myModal').style.display = "none";
}
var slideIndex = 1;
showImgs(slideIndex);
function plusImg(n) {
showImgs(slideIndex += n);
}
function currentImg(n) {
console.log(n);
showImgs(n);
}
function showImgs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (!x.length) return;
slideIndex = n;
if (n > x.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = x.length;
}
console.log(x.length)
for (i = 0; i < x.length; i++) {
console.log(i)
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-opacity-off", "");
}
x[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " w3-opacity-off";
captionText.innerHTML = dots[slideIndex - 1].alt;
}
BTW, I changed alert to console.log for better debug experience. I also added the style
.mySlides {display:none}
Please check. Hope above helps.

w3.css slideshow: How to add automatic slideshow functionality

I want to make this slideshow from w3.css library to slideshow automatically every 4-5 seconds. Can also be found at w3schools editor.
More documentation of w3.css slideshows can be found here
I need to somehow add this code to make the images slideshow automatically but keep the bullets background and make the arrows work:
var slideIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
x[slideIndex-1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
Here is the complete code:
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 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-white", "");
}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " w3-white";
}
.mySlides {display:none}
.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-badge {height:13px;width:13px;padding:0}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="w3-container">
<h2>Slideshow Indicators</h2>
<p>An example of using buttons to indicate how many slides there are in the slideshow, and which slide the user is currently viewing.</p>
</div>
<div class="w3-content w3-display-container" style="max-width:800px">
<img class="mySlides" src="https://cdn-s3.si.com/styles/marquee_large_2x/s3/images/trump-5.jpg" style="width:100%">
<img class="mySlides" src="https://i.ytimg.com/vi/VpevTNRK-_M/maxresdefault.jpg" style="width:100%">
<img class="mySlides" src="https://img00.deviantart.net/a73e/i/2015/261/4/3/the_magic_world_by_chibionpu-d4ol7wm.jpg" style="width:100%">
<div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
<div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">❮</div>
<div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">❯</div>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
</div>
</div>
setInterval(function(){
slideIndex++;
currentDiv(slideIndex);
}, 2000);
Add this to your code example at the end

W3 Schools Image slideshow order reversal

I've implemented the slideshow as shown on w3 schools http://www.w3schools.com/w3css/w3css_slideshow.asp but I'm having an issue with the order in which it 'slides'. I have combined the automatic slideshow with the slideshow indicators but when I load the page the order is 3, 2, 1. So the indicator is moving from right to left. I've had no joy in figuring it out myself and so hope someone can help me.
<div class="imageContent">
<div class="w3-content w3-display-container" style="max-width:670px">
<img class="mySlides" src="img/image1.jpg" style="width:100%">
<img class="mySlides" src="img/image2.jpg" style="width:100%">
<img class="mySlides" src="img/image3.jpg" style="width:100%">
<div class="w3-center w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
<div class="w3-left w3-padding-left w3-hover-text-khaki" onclick="plusDivs(-1)">❮</div>
<div class="w3-right w3-padding-right w3-hover-text-khaki" onclick="plusDivs(1)">❯</div>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
</div>
</div>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 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-white", "");
}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " w3-white";
}
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
x[slideIndex-1].style.display = "block";
setTimeout(carousel, 5000); // Change image every 5 seconds
plusDivs(1);
}
</script>
</div>
I needed to replace plusDivs(1) with showDivs(slideIndex)
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
x[slideIndex-1].style.display = "block";
setTimeout(carousel, 5000); // Change image every 5 seconds
showDivs(slideIndex);
}

Categories

Resources