In the meanwhile I also wrote a small programme, which doesnt seems to generate any error, and at the same time is also not rendering anticpated result:
var pictures = [
"https://cdn.pixabay.com/photo/2016/08/11/00/46/business-lady-1584655_960_720.jpg",
"https://cdn.pixabay.com/photo/2016/08/17/20/14/office-worker-1601391_960_720.jpg",
"https://cdn.pixabay.com/photo/2017/11/02/06/37/beautiful-2910260_960_720.jpg",
"https://cdn.pixabay.com/photo/2017/11/02/06/37/beautiful-2910259_960_720.jpg",
"https://cdn.pixabay.com/photo/2017/04/06/23/46/entrepreneur-2209672_960_720.jpg",
"https://cdn.pixabay.com/photo/2020/03/30/11/52/self-portrait-4984025_960_720.jpg"
];
console.log(pictures);
var time = 3000;
var i = 0;
// Change Image
function changeImage() {
document.getElementById("slider__slide").src = pictures[i];
// Check If Index Is Under Max
if(i < pictures.length - 1){
// Add 1 to Index
i++;
} else {
// Reset Back To Zero
i = 0;
}
// Run function every x seconds
setTimeout("changeImage()", time);
}
// Run function when page loads
window.onload=changeImage;
Please also guide me with one more thing. This is a very simple animation.
JS is huge even with canvas HTML element there are so many animations, but if we just want to control how images change in terms of animation effect, which branch of pure vanilla JS it falls under what will the accurate searchterm?
Bearing in mind my usual caveat in that I don’t know what I’m doing (in regards to JS) I had a play and added some CSS for the slide effect. However that left a blank space when the next one slides in so I transferred the current image to the background so that the next item could slide over the top.
Restarting the CSS animation seems to cause a flash in chrome so is probably not the best way to do this.
It’s probably of no use whatsoever but I had fun
I think that if you want a slide in and a slide out effect then you are going to have at least 3 images in place so that you can have one either side of the current one.
You can do a lot more in CSS width scroll snap points and overflow touch.
Thank you so much @PaulOB, @rpg_digital, and @jmrker for your contribution into the topic. @PaulOB am browsing the CSS swap as suggested by you in the above link.
Hi there, @m3g4p0p Can you also guide me to ad mouse or hand swap with JS?
That’s a lot neater than mine in half the code or less
I did think putting the images into the mark up would be the way to go but couldn’t see an easy way to cater for these two points.
Allow a continuous flow left and right rather than stopping at each end having to go back?
The image is not responsive as it is transformed by a fixed pixel width in the jS and when the window is resized two images will show. (I guess you would need to tie the routine into the resize event which may slow things down a bit.)
If you look at the link I posted Paul, ‘How to Create an Image Slider in HTML, CSS and Javascript’, he tackles this problem — starts at about the 13 minute mark.
His method relies on having clones of the first and last image at either end.
So the last image(clone) will be a clone of the first image. There will be a smooth transition to that clone image, then ontransitionend there will be a translate to the first image without transition e.g. not visible.
If you watch the video it is clearer. Simple, but effective.
Again in his example he uses clientwidth, but he has chosen to fix this which presumes all images are of the same width.
That’s a fixed width also and although it says its responsive it doesn’t seem to be responsive at all. I would steer away from any fixed width sliders unless you convert them to adaptive and use media queries to supply a range of fixed width sliders. I would prefer a fully responsive version.
Yes, I admit that this was just a simple example to answer the question where to store the images… if everything fails you can still read the image sources into an array:
This way we can still maintain the images in the markup, and then do the rest with JS.
Anyway to address your points… :-) as @rpg_digital already mentioned, a common way to achieve infinite sliding is to clone the first and the last image, and “quietly” (i.e. without transition) shift to the original images when the clones are reached. I had some trouble with the responsiveness though until I realised that some images have different ratios. oO I decided to set a fixed ratio nevertheless for a seamless look; some images are a bit cropped now, but IRL you’d probably have the same ratio for all slides anyway:
The amount of code did grow quite a bit though LOL.
