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;
}
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!
I'm creating a slider where I use a small script. With this script the slides get an additional styling (display block or none). On browser this works just fine, but on mobile it won't give the slides the additional styling. I heared that it might be the 'let' elements, but changing this to 'var' wont make a difference. Anyone knows what to improve to make this working?
Btw: testing on an iPhone 11 with IOS 15.6 (both firefox and safari)
<script>
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
let prev = document.querySelector(".prev");
let next = document.querySelector(".next");
if (!slides.length == 0) {
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides((slideIndex += n));
}
let currentSlide = function (n) {
showSlides((slideIndex = n));
};
function showSlides(n) {
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-dot", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active-dot";
}
}
prev.addEventListener("click", () => {
plusSlides(-1);
});
next.addEventListener("click", () => {
plusSlides(1);
});
</script>
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.
i am still a beginner so bear with me. I am trying to write an image gallery with jquery. I am getting an undefined error at :
slides[slideIndex-1].style.display = "block";
Here is my js code:
$(function(){
var slideIndex = 1;
$('.demo').on("click", function(e) {
e.preventDefault();
var o = $(this).attr("data-slide");
showSlides(slideIndex = o);
console.log(o);
});
$('.arrow').on('click', function (e){
e.preventDefault();
var g = $(this).attr('data-move');
showSlides(slideIndex += g);
});
function plusSlides(n) {
showSlides(slideIndex += n);
}
showSlides(slideIndex);
function showSlides(n) {
var i;
var slides = $(".mySlides");
var dots = $(".demo");
var captionText = $("#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", "");
}
console.log(slides[slideIndex-1]);
console.log(slideIndex);
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
});
Here is a codepen of the whole code with placeholder, somehow the big picture doesnt work, it does work on my localhost:
https://codepen.io/anon/pen/prdRXM
Ok... Since you use jQuery to get the images collection, better keep on using jQuery to select one.
You are using the pure JavaScript bracket [] array syntax when .eq() method is more efficient.
The index to use with .eq() is zero based... Fits perfectly with the element collection you have. So I removed all -1 from slideIndex.
Then, instead of looping the collections to hide them, just apply .hide() on the whole thing (more efficient again... And actually working).
Another issue was about the values from the data attributes being text instead of integer. I used parseInt() a couple places.
So here is you code debugged... I left all console.log() I used:
console.clear();
$(function(){
var slideIndex = 0;
$('.demo').on("click", function(e) {
e.preventDefault();
var o = parseInt($(this).attr("data-slide"));
slideIndex = o;
showSlides(slideIndex);
console.log("o: "+o+" type: "+typeof(o));
});
$('.arrow').on('click', function (e){
e.preventDefault();
var g = parseInt($(this).attr('data-move'));
console.log($(this).attr('data-move'));
console.log("g in arrow: "+g+" Type: "+typeof(g));
slideIndex += g;
showSlides(slideIndex);
});
/* // Moved lower... "showSlides" is not defined yet here.
function plusSlides(n) {
slideIndex += parseInt(n);
showSlides(slideIndex);
}
showSlides(slideIndex);
*/
function showSlides(n) {
console.log("n in showslide: "+n+" Type: "+typeof(n));
//var i;
var slides = $(".mySlides");
var dots = $(".demo");
var captionText = $("#caption");
if (n > slides.length-1) {slideIndex = 0}
if (n < 0) {slideIndex = slides.length-1}
// Why loops?
/*
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", "");
}
*/
// This works great instead of loops
slides.hide();
dots.hide();
console.log(slides.eq(slideIndex));
console.log(slideIndex);
//slides[slideIndex-1].style.display = "block";
//dots[slideIndex-1].className += " active";
slides.eq(slideIndex).show().addClass("active");
//captionText.innerHTML = dots[slideIndex-1].alt;
captionText.html(dots.eq(slideIndex).attr("alt"));
}
function plusSlides(n) {
console.log("n in plusslide: "+n+" Type: "+typeof(n));
slideIndex += parseInt(n);
showSlides(slideIndex);
}
showSlides(slideIndex);
});
CodePen
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.