Episode 1: Carousel slider control with navigation and controls (testimonial slider, content slider)
HTML-код
- Опубликовано: 17 окт 2024
- Link to prototype: www.kodhus.com...
In this tutorial we are going to create a full featured carousel content slider.
Enjoy!
If you're watching this in 2024, you have to subscribe😇....its the best tutorial worth your time. Thanks Man👏
I’ve been searching for a week on how to do this w/o a library. Subscribed for real.
Here in 2023, you keep saving us with this brilhant tutorial, thanks !!!
Best tutorial and spot on! All tutorials on YT are about images. This is most flexible and clearly explained. Big Thanks!!!
this is literally the best carousel tutorial i've watched..............thankyou
Wow...! The method you have used here is unlike any other I know. Now I've got a new snippet to work on. Thanks for the tutorial
Best tutorial for a carousel I've found.
This is brilliant. Definitely deserves to be the topmost ranked tutorial regarding the making of js carousel!
Very well explained and easy to follow. I managed to apply it to my own testimonial slider design while doing it for the first time and felt very proud of myself. Thank you very much for this helpful tutorial.
my second question : this works well for 4 images in a slider as its divided evenly, what if the slider has uneven numbers of images such as 5, what would be the solution
Thanks so much for the tutorial, I was having issues with my positioning - I was using inline-block, which meant that my slides did not line up in the container. Really happy with your tutorial and solution :)
Thank you for your tutorial. I actually tried to do that just after your explanation how its work and I did it! Thank you. Than I followed the rest of tutorial to see how your code was different than mine. I added as well the functionality to determine how many sections is in total and based on that set automatic scaling for scroll.
Hey man! Thank you so much for this piece of heaven! I passed through a lot of tutorials here in RUclips, but yours worked absolutely perfect for my purpose! keep the good work, I wish all of the best for you!
A wonderful tutorial indeed... Finally a slider that is fully in your control...
Just wondering if there is a way to remove left and right arrows from the first and the last slide... I tried a lot of things but nothing seems to work...
Great tutorial with clear explanation as to what you're doing and why you're doing it.
Wow, I have been searching for these series for days and days Lol,
Your videos are amazing
Thank you so much! This gave me great inspiration for an Exam im doing right now
Excellent video thanks! Just one problem and I really hope you can help me out... For me the right and left arrows, or rather the slider.style.transform does not work, I've been searching for a while now and it seems that the problem is that the transform doesn't work on block elements such as the slider, and that the only possible solution I can find is to change the slider div to Display: inline-block, but when I do that the slider just completely disappears.
Please help would be so much appreciated!
Hope to hear from you.
Kind Regards.
I did the same for leftArrow.addEventListener and rightArrow. This fixed the issue :)
thank you very much for this amazing beginner-friendly video 🥰
Can you tell me how to do that how to additionally add to the carousel project functionality that section change automatically and with dots. Thank you for your help.
Hi, I have a problem here. Please ANSWER
So I want to upload pictures in each of the slider but right now, it is considering all 4 sliders as one single page and messing up the pictures. Can you please help me in a way that it consider all 4 sliders a different page and content of one slider doesnt appear on the other slider?
This is pure knowledge bro
Agreed that this was a very well explained tutorial. Many thanks!
Definitely enjoyed! Thank you, you solve my problem!
Very good tutorial. simple and effective at the same time.
this is the best tutorial i found on YT, thanks for a great vid
Great tutorial! I have noticed that at end tutorial when clicking to the arrows it will not change indicator.
I want to include more than 4 sections, but when I increase the number of sections, and associated values, the slide does not appear to move in sync. Could you give us an idea of how the code would work if we were to include N amount of sections?
Thank you!
Best Tutorial ever.
how i can make 1. 2. 3 4 section in 1 page after that then next other section like 5 . 6. 7 . 8 the next slide ?? can you make a video about that because You explain the content so clearly and efficiently
Thanks, lesson well explained .
Please how can I make the prev() only appear when hover on
Instead of clicking to scroll through how would you set an interval to scroll through each content? EX: it'll move to the next slide every 30 seconds, every 60 seconds, etc. ?
thankyou! very helpful.. i wish all of the best for you!
Hello, how are you
Thank you very much for this very useful lesson for me, I learned well from it, once again thank you
thanks for the beautiful explanation but @ 13:17 line 10, please why is there + before sectionIndex.... slider.style.transform= 'translate(' 👉🏾+ 👈🏾(sectionindex)+ -25+ %)..... i know we use + to concatenate but its confusing as there is nothing before it. so my question is what is the + doing before(sectionindex)
Thank you for a great tutorial. Your pace is perfect and you run through details brilliantly.
At the end though, I noticed the indicator didn't update as I went backwards using the left arrow.
Where you noted to move setIndex() up one level, within document.querySelectorAll, I did the same for leftArrow.addEventListener and rightArrow. This fixed the issue :)
It would be a great addition to have the slider automatically move through each slider to the end, and then restart from the first slide. The user can still click but an automatic slide would be great. :)
You can keep count of maxIndex by using slider.children.length and then in left arrow function compare if sectionIndex greater than 0 than sectionIndex-1 or if not maxIndex-1
Similarly for rightArrow compare if sectionIndex is less than maxIndex-1. If yes set sectionIndex+1 or else 0.
This way you'll have infinite carousel no matter how many elements you add
this is awesome thanks for the video
I just want to mention that I Promiss you are persian and from iran
I know this accent😅
Thank you so much for this perfect tutorial. Amazing!
Which technology or libraries used in js bro? Whether it is native js or not?
Guys, can you help me? I cant found fail. Slider is function, but the dots dont work.When I'm on the fourth slide and click on the right, the fourth point does not remain white. To the left, the white dot does not work for each slide. Thank you for help.
How can I make multiple texts sliders with one background?
This video is great! It saved me, thank you
Extensive ??? This was amazing
Hello! Thanks so much for your tutorial. Especially the prototype link, as I'm not a coder/developer - just a hobby.
I was wondering if it is possible to have more than one carousel on a page? I have Googled and they say you must define a new ID? Can you please explain if you can? :)
@@FrontendTips I don't understand :( you should do another video!
Hello! I've seen this video and it helped me with part of my problem. Could someone help me? I did this slider from the video except that mine displays 3 slides each time and has text com it. So i want to add active class to the first slide on the left but through the control buttons without clicking on the slide. Someone could help me please? I would really appreciate!
Thank you! this tutorial really helped me!. 😊🙋♂️
I did everything you have done here, i literally copied your code and it still didnt work ,epeciall when i had to click the right button to move it please any help
There's an issue with the dots or indicators. Whenever you reach the last slider and clic at the right or left arrows the indicator losses its selected class. The rest works perfect.
Merci beaucoup pour ce tuto! 👌
Hi... Could you please share the code for removing the left and right arrows in the first and last slide respectively... Off and on I have been trying but not reached anywhere... I am not a javascript guy but I liked this slider too much... It will be a great favour... Thanks...
@@FrontendTips Thank you very much for your reply sir... Since the last 8 hours I am trying to solve with various hit and trials but not yet found a solution. I think I have tried this but could not get the result... Maybe some syntax error.. I shall try it again... Shall let you know on your email...
Why you don't use let instead of var and template strings (` `) instead of ' ' ?
Utterly brilliant: you are a star!
But it seems like the prototype doesn't exist anymore, and no comments are answered here.
I hope you're OK. Where are you?
But does anyone have the source code that I can use as a template?
I'll type it out by hand if I need to, but having it handy would help me (and lots of others, I'm sure) a lot.
Hope someone can dive in here...
Do I have to download any third party module for this to work
1 subscriber thanks for your job man !
Very helpful!!!
Man, great!!! Just one question: Why not use UL/LI instead section? Thanks for that!
@@FrontendTips I see. Thanks!
@@FrontendTips thanks! Regards from Panama
Hi! First of all, I would like to thank the author for sharing such useful tutorial!
Does someone have a clue why is my javascript file not working with my HTML document? I regulary added to section of HTML document but somehow clicking on left and right arrows doesn't give any actions...
same problem ? any solution.....
@@jp57043 try moving your element at the end of body part of html
mine wont do anything. i already saved it but its still section1 section2 section3 section4
this is so frustarting
thank you so much for making this video, you are great....
i want when i click rightarrow 1->2->3->4->1->2->... can you help me ?
(sectionIndex < 3) ? sectionIndex + 1 : 0;
Very useful tutorial, thank you.
hey how do i make more than 1 of these on one page?
you are great dude, thank you so much & keep it up
nice explaination
Good explanation. One of the best on RUclips. However, it would be better if the code was a little less hard-coded.
Thank you🙂
link in desc isnt working
If i can give you more likes I wouldn't hesitate! Thank you so much.
one question how to go from last slide to first slide after clicking the buttons.waiting for the series
@@FrontendTips Yeah loop/continous.
@@bikramchettri9405 just change the else part to 0
rightArrow.addEventListener("click", function() {
sectionIndex = (sectionIndex < 3) ? sectionIndex + 1 : 0;
setIndex();
});
@@ajayrawat5603 Thank you!! That helped me a lot!
Thanks man
you're good
I love u.
useful
u need to zoom in in all of ur videos hard to follow this
i would be better with real images