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.
Related
I am trying to get my slider interactive on a test i'm working on and I just can't figure it out. I have some code I have utilised from W3 but I'm trying to add a couple of events for the buttons so it is all on it's own javascript file instead of embedded in the HTML.
Here is the HTML:
<!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">
<script src="main.js" defer></script>
<body>
<h2 class="w3-center">Manual Slideshow</h2>
<div class="w3-content w3-display-container">
<img class="mySlides" src="./image_1.jpg" style="width:100%">
<img class="mySlides" src="./image_2.jpg" style="width:100%">
<img class="mySlides" src="./image_3.jpg" style="width:100%">
<button id="clicker" class="w3-button w3-black w3-display-left">❮</button>
<button id="clicker" class="w3-button w3-black w3-display-right">❯</button>
</div>
</body>
</html>
Here is the Javascript:
let leftSlideButton = document.getElementById("clicker");
let rightSlideButton = document.getElementById("clicker");
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[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
let slideForward = plusDivs(1);
let slideBack = plusDivs(-1);
leftSlideButton.onclick = slideBack;
rightSlideButton.onclick = slideForward;
The slider worked when the script was embedded in the hmtl but when I tried to write in some functionality for the buttons in their own javascript file it just stops working and I'm pretty stumped now. Iv'e added them to their own variable and grabbed it's html selector so I can in turn add an event handler and link it to the function but it just doesn't work. Any help would be appreciated.
Also, this is my first post so apologies if I haven't formatted it correctly.
TIA, Neil.
Most likely the problem caused by 2 x id="clicker".
Using unique ids for the buttons should solve to problem.
Next, since slideIndex declared globally it doesn't require plusDivs middle-ware.
I would also suggest to use clearer functions and variables names for the sake of better readability. Check these: slideDivs vs showDivs, step vs n, slides vs x, etc. It maybe doesn't sound like a big deal on the given example, but it is a good habit and will save you a lot of time when working on bigger projects.
There are also some minor optimizations possible, such as changing visibility in one loop and caching slides outside of sliding function to avoid selecting it again on every click. Check the snipped for suggested rewritten code.
var visibleSlideIndex = 0;
var slides = document.getElementsByClassName("mySlides");
function slideDivs(step) {
visibleSlideIndex = (visibleSlideIndex + step + slides.length) % slides.length;
for (let index = 0; index < slides.length; index++) {
slides[index].style.display = visibleSlideIndex === index ? "block" : "none";
}
}
document.getElementById("slideLeftBtn").onclick = () => slideDivs(1);
document.getElementById("slideRightBtn").onclick = () => slideDivs(-1);
slideDivs(0);
<!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">
<script src="main.js" defer></script>
<body>
<h2 class="w3-center">Manual Slideshow</h2>
<div class="w3-content w3-display-container">
<img class="mySlides" src="./image_1.jpg" style="background-color: red;">
<img class="mySlides" src="./image_2.jpg" style="background-color: green;">
<img class="mySlides" src="./image_3.jpg" style="background-color: blue;">
<button id="slideLeftBtn" class="w3-button w3-black w3-display-left">❮</button>
<button id="slideRightBtn" class="w3-button w3-black w3-display-right">❯</button>
</div>
</body>
</html>
You have multiple issues :
First, the button selection. You are trying to get the 2 buttons with the same id, you have to change that.
Then, those 2 lines :
let slideForward = plusDivs(1);
let slideBack = plusDivs(-1);
plusDivs(1) and plusDivs(-1) are calling the function and returning the value. To fix it, you can create an anonymous function (or an arrow function) to call plusDivs
Here is a fixed version (I changed the width of the images to 25% so it would be easier to see in the snippet):
let leftSlideButton = document.getElementById("clickerLeft");
let rightSlideButton = document.getElementById("clickerRight");
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[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
leftSlideButton.onclick = () => plusDivs(1);
rightSlideButton.onclick = () => plusDivs(-1);
<h2 class="w3-center">Manual Slideshow</h2>
<div class="w3-content w3-display-container">
<img class="mySlides" src="https://via.placeholder.com/150" style="width:25%">
<img class="mySlides" src="https://via.placeholder.com/200" style="width:25%">
<img class="mySlides" src="https://via.placeholder.com/250" style="width:25%">
<button id="clickerLeft" class="w3-button w3-black w3-display-left">❮</button>
<button id="clickerRight" class="w3-button w3-black w3-display-right">❯</button>
</div>
You can't have two identical ids, so I gave the buttons separate ids, then I attached an event listener to each one with addEventListener. Inside each listener I added the plusDivs() function directly in.
let leftSlideButton = document.getElementById("clicker-left");
let rightSlideButton = document.getElementById("clicker-right");
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[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
leftSlideButton.addEventListener("click", () => {plusDivs(1)});
rightSlideButton.addEventListener("click", () => {plusDivs(-1)});
.w3-content > img{
max-height: 200px;
object-fit: contain;
background-color: lightblue;
}
<h2 class="w3-center">Manual Slideshow</h2>
<div class="w3-content w3-display-container">
<img class="mySlides" src="http://placekitten.com/100/200" style="width:100%">
<img class="mySlides" src="http://placekitten.com/200/200" style="width:100%">
<img class="mySlides" src="http://placekitten.com/150/200" style="width:100%">
<button id="clicker-left" class="w3-button w3-black w3-display-left">❮</button>
<button id="clicker-right" class="w3-button w3-black w3-display-right">❯</button>
</div>
Still a newbie in JS and stuck in a small slider issue. I have 2 simple carousel sliders on one page, but only one of them works. If I disable the second, the first one works properly, but not both at the same time.
I suspect it has to do with my Javascript code, but cannot figure out what to change:
JS (Above) and HTLM (Below):
// - - - - - BANNER SLIDER
<script>
var slideIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("bg-image-slide");
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
}
</script>
// - - - - - TESTIMONIAL SLIDER
<script>
var slideIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("testimonial");
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, 6500);
}
</script>
<!-- BANNER SLIDER -->
<div class="banner-slider">
<div class="bg-image-slide bg-slide-1"></div>
<div class="bg-image-slide bg-slide-2"></div>
<div class="bg-image-slide bg-slide-3"></div>
</div>
<!-- TESTIMONIAL SLIDER -->
<div id="testimonial-slider">
<div class="testimonial">
<p class="testimonial-review"> {{site.data.testimonials.review-1-en}} </p>
<h4 class="testimonial-client"> {{site.data.testimonials.name-1-en}} </h4>
<h5 class="testimonial-country">{{site.data.testimonials.country-1-en}}</h5>
</div>
<div class="testimonial">
<p class="testimonial-review"> {{site.data.testimonials.review-2-en}} </p>
<h4 class="testimonial-client"> {{site.data.testimonials.name-2-en}} </h4>
<h5 class="testimonial-country">{{site.data.testimonials.country-2-en}}</h5>
</div>
<div class="testimonial">
<p class="testimonial-review"> {{site.data.testimonials.review-3-en}} </p>
<h4 class="testimonial-client"> {{site.data.testimonials.name-3-en}} </h4>
<h5 class="testimonial-country">{{site.data.testimonials.country-3-en}}</h5>
</div>
</div>
For the second carousel, you have to make different function, and a different slideIndex variable.
For first carousel I used carousel function and slideIndex.
For second carousel I used carousel1 function and slideIndex1.
.display-container{
margin:20px;
border: 1px solid;
}
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<h2 class="w3-center">Manual Slideshow</h2>
<div class="display-container">
<div class="mySlides1" style="width:100%">Slide 1 </div>
<div class="mySlides1" style="width:100%">Slide 2</div>
</div>
<br><br>
<div class="display-container">
<div class="mySlides2" style="width:100%">Slide 3 </div>
<div class="mySlides2" style="width:100%">Slide 4</div>
</div>
<script>
var slideIndex = 1;
var slideIndex1 = 1;
carousel();
carousel1();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides1");
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
}
function carousel1() {
var i;
var x = document.getElementsByClassName("mySlides2");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex1++;
if (slideIndex1 > x.length) {
slideIndex1 = 1
}
x[slideIndex1 - 1].style.display = "block";
setTimeout(carousel1, 2000); // Change image every 2 seconds
}
</script>
</body>
</html>
The image slider doesn't show the image when it is clicked on at the bottom.
What may be the problem?
It shows differently in UC browser and differently in Firefox
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
captionText.innerHTML = dots[slideIndex - 1].alt;
}
<div class="container">
<!-- Container for the image gallery -->
<!-- Full-width images with number text -->
<div class="mySlides">
<img src="https://via.placeholder.com/350x150" style="width:100%"><br/>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<!-- Image text -->
<div class="caption-container">
<p id="caption"></p>
</div>
<!-- Thumbnail images -->
<div class="row">
<div class="column">
<img class="demo cursor" src="https://via.placeholder.com/50x50" style="width:100%" onclick="currentSlide({{$i}})" alt="good">
</div>
</div>
</div>
I'm using the basic code shown on https://www.w3schools.com/w3css/w3css_slideshow.asp to create an automatic slideshow for a website. Everything seems to be the same and for some reason, the slideshow is not working.
HTML:
<article id="elements">
<h2 class="major">Pictures</h2>
<div class="slideshow">
<script src="assets/slideshow.js"></script>
<img id="slide" src="images/colin1.jpg" style="width:75%">
<img id="slide" src="images/luke.jpg" style="width:75%">
<img id="slide" src="images/shep.jpg" style="width:75%">
</div>
CSS:
body #elements .slideshow #slide {
display: none;
}
JS:
var index = 0;
slideshow();
function slideshow() {
var i, x;
x = document.getElementById("slide");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
index++;
if (index > x.length) {
index = 1;
}
x[index-1].style.display = "block";
setTimeout(slideshow, 2000);
}
I appreciate anyone's help, and any ideas!
Agree with Gordon.
When selecting by ID only one element will be selected.
If you switch to using classes. e.g.
<img class="slide" src="images/colin1.jpg" style="width:75%">
Then you can select all the images using.
x = document.querySelectorAll(".slide");
which will return a nodeList, a similar construction to an Array but with different methods; that can be accessed via index. x[0], x[1], x[2].
hope this helps.
getElementById only returns one item, not an array, so you cannot use it to get all slides, use getElementsByClassName (https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName), and change id for classes:
var index = 0;
slideshow();
function slideshow() {
var i, x;
x = document.getElementsByClassName("slide");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
index++;
if (index > x.length) {
index = 1;
}
x[index - 1].style.display = "block";
setTimeout(slideshow, 2000);
console.log('changed image')
}
#elements .slideshow #slide {
display: none;
}
<article id="elements">
<h2 class="major">Pictures</h2>
<div class="slideshow">
<script src="assets/slideshow.js"></script>
<img class="slide" src="images/colin1.jpg" style="width:75%">
<img class="slide" src="images/luke.jpg" style="width:75%">
<img class="slide" src="images/shep.jpg" style="width:75%">
</div>
</article>
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