Hey Conor 👋! Thanks a lot for this tutorial, really enjoyed your pace and the way you explained your reasoning 💯 I've tried to recreate your image slider to practise my JS but for some reason the infinite loop doesn't seem to be working for me. I can only scroll down from the first image which takes me to the last clone and then the slider background disappears and I'm left with a blank space next to the last clone .. I've looked and looked through my lines of code, carefully comparing it to yours but I just can't see what I'm missing! If you have any idea what might be causing this I'd be really thankful 🙏 Again thanks a lot for this tutorial!!
hi, thanks so much for this! wondering if it can still work using tags within the DIVs to get the images from a URL instead. Seems like it should be can't get it working!
hello there, i have a question regarding scraping with chrome console from your previous videos, how do u go about extracting elements whose inner text changes on hover?
Hey👋, I absolutely love your content and I try them too.. but this code is not working for me. Can you please upload the source code so that I can fix the issue? Thank you.
@@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. ua-cam.com/video/p43Sv6O0IYQ/v-deo.htmlsi=TIaVTbqEWeT2fFH4
@@ConorBailey I watched your one video on a horizontal scroller effect. ua-cam.com/video/yXnK8ND76z8/v-deo.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.
would be nice to know your approach before you start coding - 'we're going to clone the images' doesn't really explain how you're going to tackle the problem
This is the first video I'm seeing from ur channel........time to subscribe ❤️
Hey Conor thanks for this amazing tutorial🙌🏼
Hi is it possible to add horizontal scroller that will control that carousel? thanks
Hey Conor 👋! Thanks a lot for this tutorial, really enjoyed your pace and the way you explained your reasoning 💯
I've tried to recreate your image slider to practise my JS but for some reason the infinite loop doesn't seem to be working for me. I can only scroll down from the first image which takes me to the last clone and then the slider background disappears and I'm left with a blank space next to the last clone ..
I've looked and looked through my lines of code, carefully comparing it to yours but I just can't see what I'm missing! If you have any idea what might be causing this I'd be really thankful 🙏
Again thanks a lot for this tutorial!!
hi, thanks so much for this! wondering if it can still work using tags within the DIVs to get the images from a URL instead. Seems like it should be can't get it working!
hello there,
i have a question regarding scraping with chrome console from your previous videos,
how do u go about extracting elements whose inner text changes on hover?
This is great! Thanks!
Awesome video ++++++++++++++++ 🙂
I have an issue scrolling when I have H1 included on my page. When I scroll down H1 text just disapears.
Didn't work for me though I followed the tutorial throughout.
Did the exact thing in this tutorial but not scrolling
Hey g'day there - have no idea what i am doing and just need to know how to add images to img div to display images within slider...
Hey👋, I absolutely love your content and I try them too.. but this code is not working for me. Can you please upload the source code so that I can fix the issue? Thank you.
How do I get this working with a specific class? There are multiple classes on the page, but the scroll affects all of them.
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.
hi ist possible to have this effect combine with auto play
my images are not displaying in my console it is just listing them in an array but it wont display on my page .....anyone with solutions please??
great job , but how can I make it responsive for mobile
Why does it looks so blurry on my phone??
Why doesnt the effect work on mobile? Don't understand why it wouldnt work on mobile.
@@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. ua-cam.com/video/p43Sv6O0IYQ/v-deo.htmlsi=TIaVTbqEWeT2fFH4
@@ConorBailey I watched your one video on a horizontal scroller effect. ua-cam.com/video/yXnK8ND76z8/v-deo.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.
can u upload the ocde
Yes please provide this code if someone have written.
how about ScrollX?
thats cool
Thanks Parme. Any projects on the go at the moment?
Is there anyway to do this vertically?
Sure! Same concept applied vertically here: ua-cam.com/video/6qf3_KAAVQA/v-deo.html
Sorry me, My '$' doesn't work when I try to load the images from the image folder.
Thank you
are you using backticks? ``
I wrote the same, why can't it work? What is the difference between javascript and vanilla javascript?
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?
source code plz
Can you share the source code ...
How can we add autoplay in this?
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.
would be nice to know your approach before you start coding - 'we're going to clone the images' doesn't really explain how you're going to tackle the problem