I would like to add images dynamically and have the image slider. I wrote some script, and in console I see changing src, but in HTML tere is still one picture.
Here is a code:
HTML:
<div class="sliderItau">
<a class="prevButton"> <img alt="prevButton" src="/images/prev.png"></a>
<div class="jcarousel">
<img id="image" src="/images/debito/itau_tela_02.png" alt=""></div>
<a class="nextButton"><img alt="nextButton" src="/images/next.png"></a>
</div>
JS:
const images = []
let slideIndex = 1
function preload_images() {
var image = new Image()
image.src = 'images/debito/itau_tela_01.png'
images[0] = image
image = new Image()
image.src = 'images/debito/itau_tela_02.png'
images[1] = image
image = new Image()
image.src = 'images/debito/itau_tela_03.png'
images[2] = image
}
preload_images()
const showSlidesItau = function (n) {
let img = document.getElementById('image')
let slides = img.src
slides = images[slideIndex].src
console.log(slides)
console.log(images[slideIndex].src)
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
}
const plusSlides = function (n) {
console.log(slideIndex)
showSlidesItau((slideIndex += n))
}
const next = document.querySelector('.nextButton')
const prev = document.querySelector('.prevButton')
//buttons ITAU
next.addEventListener('click', function () {
plusSlides(+1)
})
prev.addEventListener('click', function () {
plusSlides(-1)
})
So every time I press the button prev or next my src in colse has change. But not in HTML. Any idea why?
I am not a JS-Pro, but I wanted to point out a few things.
As GuyIncognito already wrote in the comments, you have to set the src-attribute directly, not on a copied variable. But there are some more flaws in your showSlidesItau() function:
Do your checks before setting the image source - not after
If n or slideIndex is out of the index range of your image array, you will still try to set it and receive an error.
Set your slideIndex to n
Otherwise the only times the image will change, is when the you are at the beginning or end of your image array...
Array indices start at 0 and end at array.length -1
So if you try something like array[array.length] you will receive an error.
I tried to rewrite the function a little bit:
const showSlidesItau = function (n) {
let img = document.getElementById("image");
// First check the index
if (n >= images.length) {
slideIndex = 0;
} else if (n < 0) {
slideIndex = images.length - 1;
} else {
slideIndex = n;
}
// then set the src attribute
img.src = images[slideIndex].src;
console.log(images[slideIndex].src);
};
I hope I could help you a bit.
Related
let left = document.querySelector('.left');
let right = document.querySelector('.right');
let img = document.querySelector('.imgs');
let imgs = document.querySelectorAll('img');
let index = 0;
function rightimg() {
right.addEventListener('click', function () {
index++;
if (index > imgs.length - 1) {
index = 0;
}
img.style.transform = `translateX(${-index * 500}px)`;
console.log(img);
});
}
// setInterval(rightimg, 2000);
left.addEventListener('click', function () {
index--;
if (index < 0) {
index = imgs.length - 1;
}
img.style.transform = `translateX(${-index * 500}px)`;
console.log(img);
});
Hi friends,
I want to make autoplay image in this slider but setInterval is not working,
can you say what is wrong in here?
Thank you
Your function adds an eventlistener but it will only work when there will be an event(which is click in this case)
You can use swiperjs, it has many types of features and framework/library implentations. https://swiperjs.com/swiper-api
I am trying to add this image slideshow into my website, However keeping running into a MAximum call stack size exceeded. The slider runs through the images not in the time interval set and then the error occurs
var i = 0; // Start Point
var images = []; // Images Array
var time = 3000; // Time Between Switch
// Image List
images[0] = "http://lorempixel.com/400/200/animals";
images[1] = "http://lorempixel.com/400/200/sports";
images[2] = "http://lorempixel.com/400/200/food";
images[3] = "http://lorempixel.com/400/200/people";
// Change Image
function changeImg(){
document.slide.src = images[i];
// Check If Index Is Under Max
if(i < images.length - 1){
// Add 1 to Index
i++;
} else {
// Reset Back To O
i = 0;
}
// Run function every x seconds
setTimeout("changeImg()", time);
}
// Run function when page loads
window.onload=changeImg;
I am posting this as an answer to have a minimal, complete and verifiable example (mcve) to make sure that the slider is not the culpritd, the code will not give that error.
Here is current syntax - if that still gives an error then there is certainly something else wrong
let i = 0, img;
const images = ["https://via.placeholder.com/150/0000FF/808080?text=Image1",
"https://via.placeholder.com/150/FF0000/FFFFFF?text=Image2",
"https://via.placeholder.com/150/FFFF00/000000?text=Image3",
"https://via.placeholder.com/150/000000/FFFFFF/?text=Image4"
];
const changeImg = function() {
slide.src = images[i];
i++;
if (i >= images.length) i = 0;
}
window.addEventListener("load", function() {
img = document.getElementById("slide");
changeImg();
setInterval(changeImg, 2000);
})
<img id="slide" />
I have a code, a simple automatic slideshow. I would like to place more than 1 slideshow, but they will overwrite each other. Please help me how can i solve this. Please help me to solve this problem. I would like to use these slideshows on the same page, but when a i try only 1 slideshow works. I would like to use 8 types of this slideshow in the future. And 1 extra, i would like to place a simple animation between the pics when they switch.
html:
<div class="pic-wrapper">
<img name="slide" width="400" height="377" object-fit="cover"/>
</div>
and
<div class="pic-wrapper">
<img name="slide2" width="400" height="377" object-fit="cover"/>
</div>
and my javascripts:
<script>
var i = 0; // Start Point
var images = []; // Images Array
var time = 3000; // Time Between Switch
// Image List
images[0] = "img/kosar/kosar1.jpg";
images[1] = "img/kosar/kosar2.jpg";
images[2] = "img/kosar/kosar3.jpg";
images[3] = "img/kosar/kosar4.jpg";
// Change Image
function changeImg(){
document.slide2.src = images[i];
// Check If Index Is Under Max
if(i < images.length - 1){
// Add 1 to Index
i++;
} else {
// Reset Back To O
i = 0;
}
// Run function every x seconds
setTimeout("changeImg()", time);
}
// Run function when page loads
window.onload=changeImg;
</script>
and
<script>
var i = 0; // Start Point
var images = []; // Images Array
var time = 3000; // Time Between Switch
// Image List
images[0] = "img/roplabda/ropi1.jpg";
images[1] = "img/roplabda/ropi2.jpg";
images[2] = "img/roplabda/ropi3.jpg";
images[3] = "img/roplabda/ropi4.jpg";
// Change Image
function changeImg(){
document.slide.src = images[i];
// Check If Index Is Under Max
if(i < images.length - 1){
// Add 1 to Index
i++;
} else {
// Reset Back To O
i = 0;
}
// Run function every x seconds
setTimeout("changeImg()", time);
}
// Run function when page loads
window.onload=changeImg;
</script>
Why don't you merge your script into something like this ?
var slide1 = 0; // First Slide index
var slide2 = 0; //Second Slide Index
var images = []; // Images Array
var time = 3000; // Time Between Switch
// Image List
imageObjects = { 'firstSlide': [
"img/roplabda/ropi1.jpg",
"img/roplabda/ropi2.jpg",
"img/roplabda/ropi3.jpg",
"img/roplabda/ropi4.jpg",
],
'secondSlide': [
"img/kosar/kosar1.jpg",
"img/kosar/kosar2.jpg",
"img/kosar/kosar3.jpg",
"img/kosar/kosar4.jpg"
]};
// Change Image
function changeImg(){
document.slide.src = imageObjects.firstSlide[slide1];
document.slide2.src = imageObjects.secondSlide[slide2];
// Check If Index Is Under Max
if(slide1 < imageObjects.firstSlide.length - 1){
// Add 1 to Index
slide1++;
} else {
// Reset Back To O
slide1 = 0;
}
if(slide2 < imageObjects.secondSlide.length - 1){
// Add 1 to Index
slide2++;
} else {
// Reset Back To O
slide2 = 0;
}
// Run function every x seconds
setTimeout("changeImg()", time);
}
// Run function when page loads
window.onload=changeImg;
If you really want to keep separate scripts for these slideshow, for whatever reason. Then you should probably keep your variables names of "i" & "images" unique and not repeat them in next script.
I don't know if this question has been asked before or not. But...
I have the following JavaScript code in my HTML file:
<img id="imageDisplay">
<script type="text/javascript">
var displayImage = document.querySelector( '#imageDisplay' );
var imageArray = [ 'http://www.joongcho.com/Images/30th-Bday-Party-01.jpg',
'http://www.joongcho.com/Images/30th-Bday-Party-02.jpg',
'http://www.joongcho.com/Images/30th-Bday-Party-03.jpg',
'http://www.joongcho.com/Images/30th-Bday-Party-04.jpg',
'http://www.joongcho.com/Images/30th-Bday-Party-05.jpg',
'http://www.joongcho.com/Images/30th-Bday-Party-06.jpg' ];
var imageCount = 0;
var imageLength = imageArray.length;
displayImage.setAttribute( 'src', imageArray[ imageCount ] );
function nextImage(imageCount) {
}
function previousImage(imageCount) {
}
</script>
I'm trying to put a next Image and a previous Image function for this HTML.
For the next image, if there are more than 1 images and the image is not the last image, then there should be a link that allows a user to click through the array forwards. Also, if the image is the last image in the array, then the link is hidden.
For the previous image, if the image is not the first image of the array, then there should be a link that allows a user click through the array backwards. if the image is the first image, then the previous link should be hidden.
Any help is appreciated.
You have to attach event listeners to buttons or links (I used buttons):
var displayImage = document.getElementById('imageDisplay');
var buttonPrev = document.getElementById('button-prev');
var buttonNext = document.getElementById('button-next');
var imageArray = [ '../Images/30th-Bday-Party-01.jpg',
'../Images/30th-Bday-Party-02.jpg',
'../Images/30th-Bday-Party-03.jpg',
'../Images/30th-Bday-Party-04.jpg',
'../Images/30th-Bday-Party-05.jpg',
'../Images/30th-Bday-Party-06.jpg' ];
var imageCount = 0;
var imageLength = imageArray.length;
function nextImage () {
imageCount++;
if (imageCount >= imageLength - 1) {
buttonNext.style.display = 'none';
imageCount = imageLength - 1;
}
if (imageCount < imageLength) {
displayImage.setAttribute('src', imageArray[imageCount]);
}
if (imageCount > 0) {
buttonPrev.style.display = 'inline';
}
}
function previousImage () {
imageCount--;
if (imageCount <= 0) {
buttonPrev.style.display = 'none';
imageCount = 0;
}
if (imageCount >= 0) {
displayImage.setAttribute('src', imageArray[imageCount]);
}
if (imageCount < imageLength) {
buttonNext.style.display = 'inline';
}
}
displayImage.setAttribute('src', imageArray[imageCount]);
displayImage.textContent = imageCount;
buttonPrev.style.display = 'none';
buttonNext.addEventListener('click', nextImage);
buttonPrev.addEventListener('click', previousImage);
<img id="imageDisplay" />
<button id="button-prev">Back</button>
<button id="button-next">Forward</button>
Of course, you can't look at the images yet.
The slideshow shows pic1.jpg through pic8.jpg and then no image for 4 seconds and then starts back at pic1.jpg. I want it to go right back to pic1.jpg after pic8.jpg.
Here is my script:
<script>
var pics = ["pic1.jpg", "pic2.jpg", "pic3.jpg", "pic4.jpg", "pic5.jpg", "pic6.jpg", "pic7.jpg", "pic8.jpg"];
var i = 1;
function changeImage() {
var image = document.getElementById('homeslideshow');
if (i < pics.length) {
image.src = pics[i]
i++;
}
else {
image.src = pics[i]
i = 0;
}
}
</script>
The function is called in the html with:
<body onload="setInterval(function(){changeImage()}, 4000)">
And the slideshow is displayed with:
<div id="section">
<img id="homeslideshow" src="pic1.jpg" alt="goofy" width="100%" height=auto>
</div>
I am a total newbie to html/css/js, so please be nice! Any help would be much appreciated.
Replace your else block as below
else {
i = 0;
image.src = pics[i];
}
as in your code, when you was setting the image.src before setting the value of i to 0, actually you were setting the image src with pics[8] which was not valid.
Also, you are missing a ; after image.src = pics[i] in the if block.
UPDATE
Replace your JS as below to solve your 8 seconds problem
<script>
var pics = ["pic1.jpg", "pic2.jpg", "pic3.jpg", "pic4.jpg", "pic5.jpg", "pic6.jpg", "pic7.jpg", "pic8.jpg"];
var i = 0;
function changeImage() {
var image = document.getElementById('homeslideshow');
if (i < pics.length-1) {
i++;
image.src = pics[i];
}
else {
i = 0;
image.src = pics[i];
}
}
</script>
You use 4000ms delay. Remove that.
setInterval(function(){changeImage()})