Vanilla JavaScript: Infinite Scrolling Image Slider 

Yes please provide this code if someone have written.

@@vredchasing8926 because the viewport on mobile devices changes on scroll in different directions so makes it appear app janky. I have figure this out though and made a mobile friendly version recently. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-p43Sv6O0IYQ.htmlsi=TIaVTbqEWeT2fFH4

@@ConorBailey I watched your one video on a horizontal scroller effect. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-yXnK8ND76z8.html&ab_channel=ConorBailey My question is, is this approach considered wrong? These are different scenarios, but is this approach still good ? I'm learning to get a job, not sure if I learnt a "bad" way to do it.

are you using backticks? ``

It's okay, I got it

@@hastaman321 How did you pull this off? I've been trying to get it worked out with no success. Thanks

@@9e9r9i9k Sorry, it's been while but I think I just just set their position as fixed in CSS.

Sure! Same concept applied vertically here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-6qf3_KAAVQA.html

Vanilla JavaScript is just normal JavaScript. What error are you receiving?

@@ConorBailey photos are not visible. console it says Failed to load resource: net::ERR_FILE_NOT_FOUND this is the error

@@gulsummaslak9753 ok can you paste your css / js to show how your referencing the image locations please.

@@ConorBailey *{margin:0; padding:0; box-sizing:border-box;} .slider-wrap{position:fixed; top:20%; left:10%; width:80%; height:300px; overflow:hidden; border:1px solid black;} .slider{position:absolute; top:0; left:0; height:100%; width:4000px; display:flex; will-change:transform; background-color:black;} .slider-item{po7:relative; flex:1%; top:2.5%; width:98%; height:95%; background-size:cover; background-position:center;} let sliderWrap = document.querySelector('.slider-wrap'); let slider = document.querySelector(".slider"); let clonesWidth; let sliderWidth; let clones = []; let disableScroll = false; let scrollPos; let items = [...document.querySelectorAll('.slider-item')]; let images = [...document.querySelectorAll('.img-div')]; images.forEach((image, idx) => { image.style.backgroundImage = `url(./images/${idx+1}.jpeg)` });

@@gulsummaslak9753 hmm that looks ok to me. Is your images folder in the same directory as your js file?

Thanks Parme. Any projects on the go at the moment?

Hey I’ll create a code pen a post here shortly

@@ConorBailey Thank you very much.

@@shubhamsingh6639 codepen.io/conorbailey/pen/PobwYmw

something like this?

@@ConorBailey This is also good but I was talking of one item(image) sliding at a time like they do in owl carousel.

Hey Sasza! Thanks so much for the comment. You a drummer too? Or programmer?

@@ConorBailey im drummer too!