Vanilla JavaScript: Infinite Scrolling Image Slider

Поділитися
Вставка
  • Опубліковано 29 жов 2024

КОМЕНТАРІ • 63

  • @spooder-mon7191
    @spooder-mon7191 3 роки тому

    This is the first video I'm seeing from ur channel........time to subscribe ❤️

  • @eip408
    @eip408 2 роки тому

    Hey Conor thanks for this amazing tutorial🙌🏼

  • @bryandelacruz9066
    @bryandelacruz9066 3 роки тому +3

    Hi is it possible to add horizontal scroller that will control that carousel? thanks

  • @mariewright2820
    @mariewright2820 2 роки тому +1

    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!!

  • @lewisshields6393
    @lewisshields6393 2 роки тому

    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!

  • @CompilingInput
    @CompilingInput 3 роки тому +1

    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?

  • @LouisHellinger
    @LouisHellinger 2 роки тому

    This is great! Thanks!

  • @mohamedyoussef8835
    @mohamedyoussef8835 Рік тому

    Awesome video ++++++++++++++++ 🙂

  • @georgegamerfloyder1989
    @georgegamerfloyder1989 2 роки тому

    I have an issue scrolling when I have H1 included on my page. When I scroll down H1 text just disapears.

  • @mattdon6705
    @mattdon6705 2 роки тому +1

    Didn't work for me though I followed the tutorial throughout.
    Did the exact thing in this tutorial but not scrolling

  • @zbataille
    @zbataille 2 роки тому

    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...

  • @mutantmantish6141
    @mutantmantish6141 Рік тому

    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.

  • @hastaman321
    @hastaman321 2 роки тому

    How do I get this working with a specific class? There are multiple classes on the page, but the scroll affects all of them.

    • @hastaman321
      @hastaman321 2 роки тому

      It's okay, I got it

    • @9e9r9i9k
      @9e9r9i9k 2 роки тому

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

    • @hastaman321
      @hastaman321 2 роки тому

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

  • @jun1408
    @jun1408 2 роки тому

    hi ist possible to have this effect combine with auto play

  • @ebukavictory3178
    @ebukavictory3178 Рік тому

    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??

  • @adambakir3533
    @adambakir3533 2 роки тому

    great job , but how can I make it responsive for mobile

  • @brianjett1446
    @brianjett1446 Рік тому

    Why does it looks so blurry on my phone??

  • @vredchasing8926
    @vredchasing8926 3 місяці тому

    Why doesnt the effect work on mobile? Don't understand why it wouldnt work on mobile.

    • @ConorBailey
      @ConorBailey  3 місяці тому

      @@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

    • @vredchasing8926
      @vredchasing8926 3 місяці тому

      @@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.

  • @omarbalanzar3093
    @omarbalanzar3093 3 роки тому +3

    can u upload the ocde

    • @zubairameen
      @zubairameen 2 роки тому

      Yes please provide this code if someone have written.

  • @minhmannguyen6492
    @minhmannguyen6492 Рік тому

    how about ScrollX?

  • @codewithehr8376
    @codewithehr8376 3 роки тому

    thats cool

    • @ConorBailey
      @ConorBailey  3 роки тому

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

  • @hastaman321
    @hastaman321 2 роки тому

    Is there anyway to do this vertically?

    • @ConorBailey
      @ConorBailey  2 роки тому

      Sure! Same concept applied vertically here: ua-cam.com/video/6qf3_KAAVQA/v-deo.html

  • @sandrokann9054
    @sandrokann9054 3 роки тому

    Sorry me, My '$' doesn't work when I try to load the images from the image folder.
    Thank you

  • @gulsummaslak9753
    @gulsummaslak9753 3 роки тому

    I wrote the same, why can't it work? What is the difference between javascript and vanilla javascript?

    • @ConorBailey
      @ConorBailey  3 роки тому

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

    • @gulsummaslak9753
      @gulsummaslak9753 3 роки тому

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

    • @ConorBailey
      @ConorBailey  3 роки тому

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

    • @gulsummaslak9753
      @gulsummaslak9753 3 роки тому

      @@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)`
      });

    • @ConorBailey
      @ConorBailey  3 роки тому

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

  • @techtricks.tech_
    @techtricks.tech_ 2 роки тому +1

    source code plz

  • @abdulrahmanalmuhajir894
    @abdulrahmanalmuhajir894 2 роки тому

    Can you share the source code ...

  • @shubhamsingh6639
    @shubhamsingh6639 3 роки тому

    How can we add autoplay in this?

    • @ConorBailey
      @ConorBailey  3 роки тому +1

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

    • @shubhamsingh6639
      @shubhamsingh6639 3 роки тому

      @@ConorBailey Thank you very much.

    • @ConorBailey
      @ConorBailey  3 роки тому +3

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

    • @ConorBailey
      @ConorBailey  3 роки тому

      something like this?

    • @shubhamsingh6639
      @shubhamsingh6639 3 роки тому +1

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

  • @nickwoodward819
    @nickwoodward819 Рік тому

    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