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>
Related
Im creating a website and one of the function is to change the display image in the section every time user scrolls back to that section
I've tried using the carousel method whereby image changes once when scroll value reaches (lets say) 100. The website glitches and image change multiple times
As shown, code should cause image to change only when user scroll pass a certain point. However, when user scroll pass a certain point, image changes multiple times and starts lagging.
var slideTopIndex = 0;
showTopDivs(slideTopIndex);
function plusTopDivs(n) {
showTopDivs(slideTopIndex += n);
}
function currentTopDiv(n) {
showTopDivs(slideTopIndex = n);
}
function showTopDivs(n) {
var i;
var x = document.getElementsByClassName("myTopSlides");
var dots = document.getElementsByClassName("dotted");
if (n > x.length) {
slideTopIndex = 1
}
if (n < 1) {
slideTopIndex = 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(" active", "");
}
x[slideTopIndex - 1].style.display = "block";
dots[slideTopIndex - 1].className += " active";
}
showTopSlides();
function showTopSlides() {
var i;
var slides = document.getElementsByClassName("myTopSlides");
var dots = document.getElementsByClassName("dotted");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideTopIndex++;
if (slideTopIndex > slides.length) {
slideTopIndex = 1
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideTopIndex - 1].style.display = "block";
dots[slideTopIndex - 1].className += " active";
window.onscroll = function() {
if (window.pageYOffset = 500) {
setTimeout(showTopSlides, 2000); // Change image every 2 seconds
}
}
}
<div class="myTopSlides fade">
<div class=" vidsection">
<div class=" video1"></div>
<div class="zt-content zt-center zt-display-center" style="background-color:rgba(0,0,0,0.4); max-width:30%; height:auto; padding:48px;z-index: 2;">The platform that bridges today to tomorrow's learning landscape</div>
</div>
</div>
<!-- Slide 2 -->
<div class="myTopSlides fade">
<div class=" vidsection">
<div class=" video2"></div>
<div class="zt-content zt-center zt-display-center" style="background-color:rgba(0,0,0,0.4); max-width:30%; height:auto; padding:48px;z-index: 2;">The platform that bridges today to tomorrow's learning landscape</div>
</div>
</div>
<!-- Slide 3 -->
<div class="myTopSlides fade">
<div class=" vidsection">
<div class=" video3"></div>
<div class="zt-content zt-center zt-display-center" style="background-color:rgba(0,0,0,0.4); max-width:30%; height:auto; padding:48px; z-index: 2;">The platform that bridges today to tomorrow's learning landscape</div>
</div>
</div>
<br>
<div style="display:none;">
<span class="dotted" onclick="currentTopDiv(1)"></span>
<span class="dotted" onclick="currentTopDiv(2)"></span>
<span class="dotted" onclick="currentTopDiv(3)"></span>
</div>
</div>
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;
}
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>
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 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
}