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!
Related
I am trying to understand why this code isn't going back to slideIndex = 0;
Can someone please explain, at the forth click I am getting undefined instead of jumping back to the first index of the slide?
Thank you for explaining.
slideIndex = 0;
function nextSlide() {
console.log(slides[slideIndex]);
slideIndex++;
if(slideIndex > slides.length){
slideIndex = 0;
}
}
Actually this the whole code, so I am trying to understand why the slideIndex is not jumping back to slideIndex=0;
One the slideIndex > myArray.length; it needs to jump back to the initializes slideIndex, but I am getting this error:
Uncaught TypeError: Cannot read properties of undefined (reading 'style')
at HTMLButtonElement.
Please help:
slideIndex=0;
const prevbtn = document.querySelector(".prev");
const nextbtn = document.querySelector(".next");
let myArray = document.querySelectorAll("img");
let i = 0;
for (i = 0; i < myArray.length; i++) {
myArray[i].style.display = "none";
}
myArray[slideIndex].style.display = "block";
nextbtn.addEventListener("click", function(){
myArray[slideIndex+1].style.display="block";
slideIndex++;
if(slideIndex >= myArray.length-1){
console.log("yes");
slideIndex=0;
}
});
prevbtn.addEventListener("click", function(){
});
(this answer refers to code supplied by the author within another answer)
the problem is this line: myArray[slideIndex+1].style.display="block";
let's say there are 9 items in myArray and slideIndex is 8. then the above tries to set the style on myArray[9] which does not exist.
you can fix this by either moving the style change to after you've adjusted and validated the slideIndex (in your next two lines), or you can use a modulus adjustment such as this: myArray[(slideIndex+1)%myArray.length].style.display="block";
This is working, but I am not sure if this a good written code, except that I can simplify the code.
let slideIndex=0;
const prevbtn = document.querySelector(".prev");
const nextbtn = document.querySelector(".next");
let myArray = document.querySelectorAll("img");
let i = 0;
for (i = 0; i < myArray.length; i++) {
myArray[i].style.display = "none";
}
myArray[slideIndex].style.display = "block";
nextbtn.addEventListener("click", function(){
if(slideIndex == 0){
slideIndex = slideIndex + 1;
}
if(slideIndex > myArray.length-1){
slideIndex = 0;
for (i = 0; i < myArray.length; i++) {
myArray[i].style.display = "none";
}
myArray[slideIndex].style.display = "block";
}
if(slideIndex<myArray.length){
myArray[slideIndex].style.display = "block";
console.log(slideIndex);
}
slideIndex++;
});
prevbtn.addEventListener("click", function(){
});
Thank you for answering, but I am using this: myArray[slideIndex+1].style.display="block"; for jumping by first click to next image otherwise you have to click twice before going to next image.
I have now this code which seems to work except that I have to click twice when page load to get the next image.
How can that be fixed?
let slideIndex=0;
const prevbtn = document.querySelector(".prev");
const nextbtn = document.querySelector(".next");
let myArray = document.querySelectorAll("img");
let i = 0;
for (i = 0; i < myArray.length; i++) {
myArray[i].style.display = "none";
}
myArray[slideIndex].style.display = "block";
nextbtn.addEventListener("click", function(){
if(slideIndex > myArray.length-1){
slideIndex = 0;
for (i = 0; i < myArray.length; i++) {
myArray[i].style.display = "none";
}
myArray[slideIndex].style.display = "block";
}
myArray[slideIndex].style.display = "block";
console.log(slideIndex);
slideIndex++;
});
prevbtn.addEventListener("click", function(){
});
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'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();
}
My slideshow consists of 8 images but only one is displayed. I figure out it is something to do with slides.length but i just don't know how exactly to alter it. My js code is as below.
window.addEventListener('DOMContentLoaded',init,false);
function init(){
'use strict';
var slideIndex = 1;
showSlides(slideIndex);
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
console.log(slides.length);
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", "");
}
console.log(slides,slides.length,slideIndex-1,slides[0]);
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
}
Some problems I've noticed:
You only run this code once, so the slides won't get updated.
You never increase or decrease slideIndex
What you can do:
Run this on a timer to update every few seconds or on a button click
Increase the slideIndex each time to allow the slide to change.
If you are still having trouble, please give us a bit more information. Good luck
been fighting to get a solution, sorry took a while but i came up with something to increase/decrease the slideshows? I however can't resize the images(they appear too big on the slideshow)! I also can't have the first image displayed! The images on appear onclick. here is the new js code.
window.addEventListener('DOMContentLoaded',init,false);
function init(){
'use strict';
var slideIndex = 0; //first img
var prev=document.querySelector('[class="prev"]'); //get arrow
var next=document.getElementsByClassName('next')[0]; //get arrow
/*invoke function with clicl on arrow*/
next.addEventListener('click',
function(){showSlides(slideIndex)});
function showSlides() {
//console.log(slideIndex);
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
//console.log(slides.length);
if (slideIndex > slides.length) {slideIndex = 1} //wenn ende erreicht, dann von vorn
else slideIndex++;
//console.log(slideIndex);
slides[slideIndex-1].style.display = "none";
slides[slideIndex].style.display="block";
dots[slideIndex].className += " active";
}
}
window.onload = function () {
var slideShow = function () {
var i;
var slides = document.querySelectorAll(".slides");
for (i = 0; i < slides.length; i++) {
slides[i].setAttribute("style","display:none");
}
count++;
if (count > slides.length) { count = 1; }
slides[count-1].setAttribute("style","display:block");
setTimeout(slideShow, 3600);
}
var count = 0;
slideShow();
}
window.onload = function () {
/* ...then execute the content of the referenced FN */
'use strict';
function showData() {
var info = document.getElementById('info');
var selctedImg = this;
var html = '<b>Alle Informationen des Bildes:</b>';
html += '<ul>';
html += '<li><b>src-Attribut:</b><br>' + selctedImg.src + '</li>';
html += '<li><b>alt-Attribut:</b><br>' + selctedImg.alt + '</li>';
html += '<li><b>title-Attribut:</b><br>' + selctedImg.title + '</li>';
html += '<li><b>id-Attribut:</b><br>' + selctedImg.id + '</li>';
html += '</ul>';
info.innerHTML = html;
}
var img = document.getElementById('images').getElementsByTagName('img');
console.log(img);
/* Bind the event handlers.
After this code block an information [ev] or [event] can be seen at the img element in the input sector of the browser */
for (var index = 0; index < img.length; index++) {
img[index].onmouseover = showData;
}
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);
}
}