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>
Related
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>
I have the HTML code below and want to randomize the images. How to accomplish it?
Below the code is part of html, and the code is running to show the images in order. I don't know how to ulter the javascripte and want the images can be showed randomly.
Thank you for your concern and hopefully somebody can help.
Lawrence
<div class="slideshow-container">
<div class="mySlides fade">
<img src="http://i.dailymail.co.uk/i/pix/2017/03/01/14/3DD766C300000578-4271496-image-a-39_1488378897470.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="https://hips.hearstapps.com/roa.h-cdn.co/assets/16/30/1469467513-01-2016-aston-martin-db9-gt.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="https://article.images.consumerreports.org/prod/content/dam/CRO%20Images%202017/Magazine-Articles/April/Google-Auto-Profile-images-2017/PRF-811" style="width:100%">
</div>
<div class="mySlides fade">
<img src="http://www.lexus.com/byl2014/pub-share/images/series/lc.png" style="width:100%">
</div>
</div>
<br>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>
You can generate a random number to choose a random image:
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 1}
var rand = Math.floor((Math.random() * slides.length));
slides[rand].style.display = "block";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
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'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);
}
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>