Hi I have a slideshow javascript running on my website but it doesn't seem to be working properly when I change the images back and forth and the automaticity doesn't show image 6. Could someone please help me write it up because I have been trying over a month and reached nowhere.
https://wbd-ownwork-13--15nalaas.repl.co/
<script>
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;
}
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 = 2}
slides[slideIndex-2].style.display = "block";
setTimeout(showSlides, 4000); // Change image every 4 seconds
}
</script>
First of all you need not to add the custom controls for changing the slides because the slide show is more than enough.
And secondly you need to change the entire script to the given script only then it is going to work because rest of your script is messing with the slideshow.
Change the entire script from line 94 to line 125 in your HTML to this -
<script>
var slideIndex = 0;
showSlides();
function showSlides(){
var slides = document.querySelectorAll('.mySlides');
for(var i = 0; i < slides.length; i++){
slides[i].style.display = "none";
}
slides[slideIndex].style.display = "block";
slideIndex++;
if(slideIndex > slides.length - 1){slideIndex = 0}
loop();
}
function loop(){
setTimeout(showSlides, 1000);
}
</script>
If still you have a problem the please ask again.
Related
I have my JavaScript file located in a different folder, so right now it can't find the class that it's looking for. I'd like it to know the path of the class while being in a separate folder.
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
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
}
Your code has nothing whatsoever to do with path
Perhaps you load the script in the head before the slideshow html exists.
Try
var slideIndex = 0;
window.addEventListener("load",showSlides);
I have implemented automatic and manual image slider together. But I also want to pause the automatic sliding on hover. How can i do this. Here is the code snippet. No external libraries other than jQuery.
var slideIndex = 0;
var slides = document.getElementsByClassName("mySlides");
showSlides();
function showSlides() {
var i;
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, 5000); // Change image every 5 seconds
}
function currentSlide(no) {
var i;
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex = no;
slides[no-1].style.display = "block";
}
function plusSlides(n) {
var newslideIndex = slideIndex + n;
if(newslideIndex < 4 && newslideIndex > 0){
currentSlide(newslideIndex);
}
}
Im trying to make a slideshow of images that changes every 10 seconds but has a button at the bottom where if you clicked on the dot it will take you back to that image. The problem is when I click the of the buttons it speeds the timer up. how do i stop this, so that when i click on the button it resets the timer?
function showSlides() {
var nextSlide = false
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
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, 10000, slideIndex++); // Change image every 10 seconds
}
thanks to a comment by Teemu. who showed me how to do it, i applyed it to the code and it works
function timer() {
this.STimer = setTimeout(showSlides, 10000, slideIndex++);
}
function cancelTimer(){
clearTimeout(this.STimer);
}
function currentDiv(n) {
cancelTimer();
showSlides(slideIndex = n);
}
function showSlides() {
var nextSlide = false
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
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";
timer();
}
It seems there is some error in javascript, please help.
Slides are not visible at page load, but appears o click of dot.
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
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";
}
You are defining all the functions for sliding but it doesn't look like you are calling any of them until a click. Try adding
showSlides() below your code.
Asif Vk could you demonstrate in JSFiddle?
i want to make slide images to automatically replace. Here is code i use for manual replacing by clicking on buttoms. Sorry if it is some basics issue, but i don't realy use javascript. I've got it from w3schools, and try to combine the automatic replacing and this, but didn't work.
Thanks for answers.
PS: There are 3 images now and 4 will be.
var slideIndex = 1;
showDivs();
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";
x[slideIndex-1].style.width = "784px";
x[slideIndex-1].style.height = "350px";
}
The thing you need to do is continuously call the function for changing the slides in certain intervals. I am adding the complete code after making changes for the same.
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
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";
}
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
var index = 0;
setInterval(function() {
index++;
if( self.index == self.slides.length ) {
index = 0;
}
currentSlide( index );
}, 2000);
Instead of 2000, you can give any delay you need. Think this solves your problem.