I'm trying to add manual control to an auto slider: https://jsfiddle.net/t8ap0gvz/ The auto play works but the manual controls (prev/next & dots) don't function. What am I doing wrong?
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);
}
}
In the answer above,he said about the DOM to load, in JSfiddle in the option of the javascript change the order in where the javascript is write. For functions in onclick is better put after all the html, by default JSfiddle put in windows.onload so only change the order in No wrap - bottom of and this will work.
In LOAD TYPE select that option
In a real code HTML the script tag will be in the end of your HTML body. In a script tag.
I think it's loading the functions before the html. When I move the call of showSlides() to like below it works:
// Await DOM to be loaded
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => {
showSlides();
});
} else {
showSlides();
}
Related
I have this function that loops through divs (cards) and every 3 seconds shoe the next one. kind of a slide show, a gallery.
I wish to run this function on multiple "galleries" (that are built exactly the same). How can I acheieve that?
here's the js that right now collect all 'cards' in the page, I want it to take the cards of each gallery and run it on the gallery itself:
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("card");
for (i = 0; i < slides.length; i++) {
slides[i].style.opacity = "0";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.opacity = "1";
setTimeout(showSlides, 3000);
}
I hope I'm being understood - thanks a lot in advance!
You almost achieve it : )
function slideIt(elementId) {
var slideIndex = 0;
// showSlides();
function showSlides() {
var i;
// var slides = document.getElementsByClassName("card");
var slides = document.getElementsById(elementId);
// ....
}
showSlides();
}
slideIt("card1")
slideIt("card2")
I used this eventually and it works great:
const elements = document.querySelectorAll('.today-show');
var timer = document.getElementById('timer').innerHTML;
function intervalFunction(slideIndex) {
var i;
const currentElement = this;
var slides = currentElement.querySelectorAll(".home-show-title");
for (i = 0; i < slides.length; i++) {
slides[i].classList.remove('home-title-appear');
}
setTimeout(function(){
slides[slideIndex].classList.add('home-title-appear');
},800)
}
elements.forEach(element => {
const boundIntervalFunction = intervalFunction.bind(element);
let slideIndex = 1;
setInterval(() => {
boundIntervalFunction(slideIndex);
slideIndex++;
if (slideIndex > 2) {slideIndex = 0 }
}, timer+"000");
});
thanks for the help!
this function loops trough a div called mySlides, and sets the current slide on display block and the one before, back to a display none.
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var info = document.getElementsByClassName("numbertext");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
I want to deley this display block for 1 second, i dont know how to setTimeOut() to such a function.
slides[slideIndex - 1].style.display = "block";
};
Your bottom for loop would look like this
for (let i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
setTimeout(function(){
slides[i - 1].style.display = "block";
}, 1000) //time in ms
}
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);
}
}
I've been following a slideshow tutorial on w3schools to learn how to create my own.
This is the link to the tutorial's code. What I am referring to is this code however.
<script>
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
}
</script>
I wanted to make multiple slideshows for a single page so I made it so this section of the code would take a parameter and then I could just insert my list of images. But when I changed the code to this...
var images = document.getElementsByClassName("mySlides");
var imageNum = document.getElementsByClassName("dot");
showSlides(images, imageNum);
function showSlides(slides, dots) {
var i;
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);
}
Complete code available via this link.
It gives me the error property of length undefined, even though .length can be used on a HTML Collection.
Why does it seem that this function cannot accept a HTML Collection as a parameter?
Edit: After looking at feedback and noticing that I made it harder for people to help me, I made a codesandbox link with my issue. I included the solution as a comment, so people can see before and after. I also included the entire function above.
Thank you for your feedback so I can make questions more clear and sorry about the trouble!
It's because of that line at the end of the function
setTimeout(showSlides, 2000); // Change image every 2 seconds
it call showSlides without any arguments
To add argument to call you can do :
setTimeout(() => { showSlides(slides, dots) }, 2000);
// call from an anonymous function
// or
setTimeout(showSlides, 2000, slides, dots);
// use additional params of setTimeout
Here's the doc for setTimeout
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.