Build a Touch Slider with HTML, CSS & JavaScript
HTML-код
- Опубликовано: 2 июн 2024
- Build a full screen touch slider with HTML, CSS & JavaScript
Full Screen Touch Slider Repo:
github.com/bushblade/Full-Scr...
React Component Repo:
github.com/bushblade/react-to...
RUclips Video Codepen:
codepen.io/bradtraversy/pen/E...
Handmade Knives By Will Adams:
bushblade.co.uk/
Timestamps:
0:00 - Intro
1:49 - The HTML
3:32 - The CSS
10:57 - The JavaScript 
Наука
I always find myself dropping whatever I'm currently doing and watching these videos.
Well, thank you :) I appreciate that
@@TraversyMedia Yes these videos are very useful and well explained
@@lifeform106 on second line you can close video, cause he look for every f slides, instead of find all slides in container above. or use array.from instead of [...]
@@helpgl557 he use old aproach, what's wrong with that
Brad You are the best as usual, Thank you for all your effort and this amazing work on this channel
I would definitely point out that if you do a full-screen slide like this, you MUST put some indicator on each side of the picture (probably "" sort of things), otherwise it is not at all obvious to your user that they can swipe horizontally. Thanks for the great Tut as always!
As someone who works professionally in react every day as well as always chasing frameworks, it’s a pleasure to see vanilla JavaScript on the front end. thank you Brad!
Brad is the best instructor ever. I love his dedication and his unique way of explaining had concepts. Thank you so much Brad, you are the best, God bless you exceedingly and abundantly.
I'm at the end of the third of your courses on Udemy and I can tell - you are great at explaining things even if you have to repeat yourself over and over again. Thank you for great content!
Because of your courses i’m very confident to use HTML/CSS/Sass and now i’m half-way thru JavaScript. Thank you Brad.
*Legends are always 1 minute after uploading.* 👊
Watching it at the end of 2022 and I find it amazing! I learned a lot today. Thank you Brad for the excellent job you always do. We really appreciate it. 👍💯
You are just awesome Brad, you always bring us something amazing and new particularly JavaScript , I love Vanilla by the way ;)
Amazing Brad!!! Thanks for all the great little and big projects you share with us!!!
This year is already blessed. Thanks Brad
It's always great to hear from you, Sir!
I'm not a web developer, but I've been asked to do a website for the club. I was able to follow your brilliant video and got it working. It works really well for my application. You explained each step so well and I learnt a lot. thanks so much.
thank you Brad you're changing the lives of many in the world
You are feeding and helping alot of people in this pandemic to chage their job.
We appreciate 🙏 you
Thak you
@@TraversyMedia 0_0 thak??
Love yours and Florin pop's 50 projects in 50 days course. It has top notch content.
Good work.
often times,l i wonder if you're an angel,
i was recently planning on creating a slider library, but i had some challenges, then boom your video popped out,
thanks brad.
I will need this in my next project. Thank you, Brad!
i like this type of vidoes that makes cool stuff using the basics only, really helpful
Superb content, as usual! Brad is a *legend* and a *huge inspiration!* Greetings from Spain!
Thanks Brad. Learn a lot from this channel 🦾
I've been looking for something like this. Awesome!
one of the best channels for web developing, thanks a lot for the awesome content
Thanks Brad,
Nice use of closure in the touchStart handler,
as an alternative one can store the index in slide.dataset.index for example and then in the touchStart we can retrieve it back and update the currentIndex,
another way to get the index from within the touchStart can be done using slides.indexOf(event.target)
Not tested but I think it'll work.
Thanks once again
An alternative to using Array.from (if you wanna save space) could be spreading the NodeList too. Awesome tutorial, Brad! 🎉So glad you're back doing these! 😊
Thank you so much, I was looking exactly for this. I needed to make a carousel from scratch supporting touch only for mobile and this did the trick. You're the best!
This is awesome, one tutorial and many useful features! That's is why I 💖 Brad 👌👌
damn i just finished this project. it took me 10 hour because i was studying and doing the project at the same time. this guy is such a good teacher i cant believe i find out about this channel. thanks very much for this lesson.
I finally learned how to make an image slider, thank you Brad
I always love to study with these pure HTML/CSS/Vanilla JS tutorials, last year I completed your 20 Vanilla JS Projects on Udemy and now I'm studying the 50 Projects in 50 Days
Could you share a link to the Udemy courses please? 😃
BARD!!! just what i needed for my final project on my sutdies. been folowing from 2018, took several of your courses on Udemy..
Thank you!
I was looking for this a few years ago... I was searching like crazy and i could not find it. Thank you very much for share !
Thank you ... your efforts are highly appreciated
it took me about 3+ hours to understand how it works, I am quite new to javascript
thank you
Thanks man! Really efficient and easy to follow tutorial :)
wooooooow it's really cool i want always to do that but finally you made it and i will learn how to expand this thank you very much Brad
Very good. I played with carousels lately and I had fun trying to develop my own version and frankly it feels good to make something cool alone
hope it was looping. still good as usual. just like brad says everytime. "you will get to understand js gradually when doing it everyday"
Love your tutorials!!!
Great one!!!
Keep uploading more these kinda js stuff projects 😊
You are reading our minds! Excellent tutorial and I will use this for my client's project if you don't mind :) it's the best scroll effect when having lots of content stack below each other on mobile view. this will make the site feel more of an app :)
Awesom video Sir. Love your videos.
Just in time, I needed a lightweight carousel ! Will move the code into a WebComponent. Thanks
Thank you! It was very helpful
Amazing Brad!
Thank you, that helps me a lot and also inspires me how to create thing!
Great project. Thank you.
Looks really cool!
Thanks Dennis
You guys make really great contents. 😊
Thank you for all !!!
I have been looking for a course like because when I use swiper.js and bundle I with webpack the swiper.js file is larger than my whole code. now I can create my own sliders. I am with the course. Thanks brad for the basics now I can advance it and make work how I want it like adding auto slides.
thank you so much, looks really convenient and modern, i am learning js, hope one day i ll able to write codes like this by myself :)
another great tutorial. Thank you
This was great, thanks!
In like Brads videos, they are very good.
Awesome kinda carousel, i like it,
A live chat assistant app would be a good idea too
Wonderful Brad
Hi, Brad! Thank you so much for your tutorials, you truly have a gift of teaching. You teach in such a straightforward manner and make advanced concepts understandable to everyone. God bless you, and I pray that Jesus Christ will lead you in hope and peace for the continuation of your journey. Much love from Norway
Thank you so much for this🔥
Awesome tutorials!!!
more of this please, i want to learn more html, css and javascript combined
You are always helpful🤗
the best ever from youtube
I've been developing an app and it has a feature to view content in different styles. My friend suggested me to implement the fullscreen touch-drag one but I didn't want to spend time on implementing this feature as I had other things to do. However, if smn has already implemented this with only one component...I'll take it into consideration :D thx for the video
Ótimo vídeo parabéns ✌.
Bought your's and Dennis Ivy's new course 'Django with React' yesterday. Would love to see you cover Django with React on this channel as well. Thanks. 👍
Dennis is planning a really cool Django project for the channel. I will be doing a few Django projects this year as well
Congratulations! Please legend!
great video the hard part is remembering what all this is after typing it all in !
Great content!
Nice video, thanks for making them.
Actually, that would be nice if you made more of non-trivial demos on the channel, like, drag-n-drop, touch sliders, caching layers in real time apps, etc.
thanks for the nice tutorial
You [are] the best!
I hope you start live streaming, not just coding but also general talks about coding and some-other interesting stuff
God bless you Brad
Brad boss, as always
incredible!
a query, what plugin did you use to display the cell phone when you activated it?
Greetings from Costa Rica
You never loose your magic!
Very useful.
Just what I wanted
Iphone 12 is so damn cheap in the US!
Great job and thank you for the tutorial Brad.
Your videos have helped me much on my CSS and html... Whaooo ..thanks to you... Please is there anyway I can learn java script on android ... I downloaded your JS crash course but I couldn't use it on my android device... Once again, thanks ... I love what you are doing..🙏
Great tutorial! Just one question. Is there anyway to get the little dots under the image that indicate which slide your on?
Awesome video
Bro the vid just uploaded
I'd say you're using dejavu... You just uploaded the answer to my question!
Thanks for this great guide! Is there a guide to create this with React?
Thanks Brad
Could you please activate the video subtitles?
looks awesome,, :)
Hey brad! I have an important question for you... I know a little bit of Html, css and js, I took the web developer bootcamp and also your Api masterclass with node but never touch react before, do you think I can learn react with your e-commerce course ?
Do you have an updated JavaScript course?
I learned a lot from this video, Thank you so much!! But I have a little question: why use clientX and pageX? What will happen if we use clientX in desktop?
Thank you very much for this tutorial! Could you please tell how to disable swiping on the first and last slides? So that I cannot swipe right after last slide and before first slide
Thx a lot!!
Awesome! What do you think of using css "scroll-snap" property? It is pretty useful as it kinda simulates slides by snapping scroll positions and doesn't require js.
I actually tried that before going with transforms and requestAnimationFrame it did kind of work, but not as well. IIRC you can't remove the overflow or the scroll bar as that stops it working. Worked better in mobile view than in desktop.
@@willadams6217 Yeah, but here is a quick webkit-only fix to lessen scrollbar annoyances:
Use the ::-webkit-scrollbar selector and change the scrollbar size to some thing like 3px. It is pretty flexible. Though for Firefox its a bit harder. Just look for some MDN docs
@@nikhilmwarrier7948 Yeah I tried that but wasn't happy with it.
Thanks dude
Amazing
I love your tutorials Amazing work !Can I use the code for my self?
Cool..❤❤
Sir please tell me which project make for react js job I do your project of react.js
Thank You! Can you please add next and previous button on the same project
Learning a lot by such videos, pls make like these, helping me a lot buddy! ✌