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;
}
Related
I'm an absolute newbie on Javascript, but I'm trying to put together three separate automatic slideshows on the same page. I've found a couple of helpful links from W3Schools (https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_auto & https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_rr), but when using either, I can't include all three slideshows together, or if I repeat the same <script>three times (changing the document.getElementsByClassName) all of the slideshows seem to collapse. I've also found some options for multiple slideshows, but I have no idea how to make them automatic. CSS is no problem, I just can't figure out the combination in the script to make all three slideshows work simultaneously and automatic.
Thanks in advance!
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("slide1", "slide2", "slide3");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
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";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("slide1");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
</script>
<div id="container1">
<img id="aa" class="slide1" src="id1.png">
<img id="bb" class="slide1" src="id2.png">
<img id="cc" class="slide1" src="id3.png">
</div>
<div id="container2">
<img id="dd" class="slide2" src="cr1.png">
<img id="ee" class="slide2" src="cr2.png">
<img id="ff" class="slide2" src="cr3.png">
</div>
<div id="container3">
<img id="ab" class="slide3" src="id1.png">
<img id="hh" class="slide3" src="id2.png">
<img id="ii" class="slide3" src="id3.png">
</div>
I had the same problem, I gave each slideshow a different class, then I included a separate function for each class and then I isolated each function by wrapping it in the below
;(function() {
JS code
})()
I've edited your code so it should work now :)
<div id="container1">
<img id="aa" class="slide1" src="id1.png">
<img id="bb" class="slide1" src="id2.png">
<img id="cc" class="slide1" src="id3.png">
</div>
<div id="container2">
<img id="dd" class="slide2" src="cr1.png">
<img id="ee" class="slide2" src="cr2.png">
<img id="ff" class="slide2" src="cr3.png">
</div>
<div id="container3">
<img id="ab" class="slide3" src="id1.png">
<img id="hh" class="slide3" src="id2.png">
<img id="ii" class="slide3" src="id3.png">
</div>
<script>
;(function() {
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("slide1");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
})()
;(function() {
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("slide2");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
})()
;(function() {
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("slide3");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
})()
</script>
I have coded this JavaScript slideshow to display a number of images however they are not displayed anywhere, the only thing showing are the two buttons I have included for choosing slides.
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x= document.getElementsByClassName("slides");
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";
}
<img class="slides" href="Bgimage.jpg">
<img class="slides" href="roses.jpg">
<img class="slides" href="sunflowers.jpg">
<img class="slides" href="Vessel1.jpg">
<button class="go-left" onclick="plusDivs(-1)">❮</button>
<button class="go-right" onclick="plusDivs(+1)">❯</button>
Any help is much appreciated. Thanks!
Img tag has src not href. Your code works perfectly.
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x= document.getElementsByClassName("slides");
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";
}
<img class="slides" src="http://fakeimg.pl/250x100/">
<img class="slides" src="http://fakeimg.pl/250x100/ff0000/">
<img class="slides" src="http://fakeimg.pl/350x200/ff0000/000">
<img class="slides" src="http://fakeimg.pl/250x100/ff0000/">
<button class="go-left" onclick="plusDivs(-1)">❮</button>
<button class="go-right" onclick="plusDivs(+1)">❯</button>
The img tag uses src to determine the source of the image. If you change href to src, you should be able to see the images again.
<img class="slides" src="Bgimage.jpg">
<img class="slides" src="roses.jpg">
<img class="slides" src="sunflowers.jpg">
<img class="slides" src="Vessel1.jpg">
var slideIndex = 0;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x= document.getElementsByClassName("slides");
if (n >= x.length) { slideIndex = 0; }
if (n < 0) { slideIndex = x.length-1; }
for (i = 0; i < x.length; i++) {
if(i!==slideIndex) {
x[i].style.display = "none";
} else {
x[i].style.display = "block";
}
}
}
<img class="slides" src="Bgimage.jpg">
<img class="slides" src="roses.jpg">
<img class="slides" src="sunflowers.jpg">
<img class="slides" src="Vessel1.jpg">
<button class="go-left" onclick="plusDivs(-1)">❮</button>
<button class="go-right" onclick="plusDivs(+1)">❯</button>
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
I found a w3 schools slideshow that seems to work half the time perfectly the other half it will give me an error that says Uncaught TypeError: Cannot read property 'style' of undefined at showDivs (slideshow.js:33) which is the x[slideIndex-1] part. I can't quite seem to figure out whats wrong.
HTML
<h2 class="w3-center"></h2>
<div class="w3-content w3-display-container">
<img class="mybottom mySlides" src="pics/pic3.3.jpg" style="width:100%">
<img class="mybottom mySlides" src="pics/pic3.jpg" style="width:100%">
<img class="mybottom mySlides" src="pics/pic2.jpg" style="width:100%">
<img class="mybottom mySlides" src="pics/pic4.jpg" style="width:100%">
<button id="back" class="w3-button w3-black w3-display-left">❮</button>
<button id="forward" class="w3-button w3-black w3-display-right">❯</button>
</div>
JS
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";
}
document.getElementById("back").addEventListener("click", function(){
plusDivs(-1);
});
document.getElementById("forward").addEventListener("click", function(){
plusDivs(1);
});
I am trying to have two separate timeout times in my coursel (so that 2 slides are faster than the others). I have all of my images at 7 seconds but I want my "brands1slide" and "brands2slide" to be 3.5 seconds.
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, 7000);
}
<div class="SlidesDiv" style="max-width:1024px">
<img class="mySlides" id="returnsSlide" alt="returnsSlide" src="img/ReturnsOnly.png" />
<img class="mySlides" id="brands1Slide" alt="brands1Slide" src="img/Brands_1.png" />
<img class="mySlides" id="brands2Slide" alt="brands2Slide" src="img/Brands_2.png" />
<img class="mySlides" id="fsaSlide" alt="brands2Slide" src="img/FSAs.png" />
</div>
One way to do it is to have an array of times specifying the timeout for each slide:
var slideTimes = [7000, 3500, 3500, 7000];
Then you can use that to choose a good timeout for each slide:
setTimeout(carousel, slideTimes[slideIndex - 1]);
Snippet:
var slideTimes = [3500, 3500, 7000, 7000];
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, slideTimes[slideIndex - 1]);
}
<div class="SlidesDiv" style="max-width:1024px">
<img class="mySlides" id="returnsSlide" alt="returnsSlide" src="img/ReturnsOnly.png" />
<img class="mySlides" id="brands1Slide" alt="brands1Slide" src="img/Brands_1.png" />
<img class="mySlides" id="brands2Slide" alt="brands2Slide" src="img/Brands_2.png" />
<img class="mySlides" id="fsaSlide" alt="brands2Slide" src="img/FSAs.png" />
</div>