Responsive Image Slider | With Manual Button & Auto-play Navigation Visibility - HTML CSS Javascript
ฝัง
- เผยแพร่เมื่อ 12 พ.ย. 2020
- In this video, You will learn how to design a Responsive Image Slider(Slideshow / Carousel) with Manual Navigation Buttons and Auto-Play Navigation functionalities only using pure javascript. In this Image Slider, you can add more images you want without changing any CSS styles because this image slider manual and auto-play navigation functionalities working with pure javascript. This image slider is fully responsive and perfectly fine for your use. And there is a text title and a text paragraph on each image on the slider. Hope this video will be helpful.
+ Like and Subscribe 🔔 for More! ❤
∎ Get This Project Source Codes - www.buymeacoffee.com/codingsn...
Book Me 🔖
-----------------------
∎ Book me to Fix your project Bugs & Issues - www.buymeacoffee.com/codingsn...
∎ Book me to Convert your Figma, PSD, and XD Design to an HTML Website - www.buymeacoffee.com/codingsn...
∎ View Source Codes & Download File Setup - codingsnow.com
∎ Download All Source Files On Patreon - / 43858102
∎ Facebook Page - / codingsnow
∎ Instagram - / coding.snow
∎ Support From Paypal - paypal.me/codingsnowget
Support My Works ❤️❄️
--------------------------------------------
∎ Buymeacoffee - www.buymeacoffee.com/codingsnow
∎ Patreon - / codingsnow
#ImageSlider #ResponsiveImageSlider #ImageSliderNavigationJavascript
🎵 Background Music
---------------------------------------
Track: Syn Cole - Time [NCS Release]
Music provided by NoCopyrightSounds.
Watch: • Syn Cole - Time | Futu...
Free Download / Stream: ncs.io/SCTime
____________________
Copyright Disclaimer under section 107 of the Copyright Act of 1976, allowance is made for “fair use” for purposes such as criticism, comment, news reporting, teaching, scholarship, education, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing.
Thank you man, you saved my life! This is exactly what I was looking for, and it looks awesome as well! You've just earned a new subscriber. Keep up the great work!
You're most welcome! ❤
Sir if it's working for you please what did you do. Because I just did copy and paste the code into my html but nothing is working for me please help
Very good and easy to follow tutorial, really THANK YOU!!! and love the tracks playing on in the background, nice selection!!!
Apart from getting what I exactly needed, I still learnt another vital thing, clip path.
Thanks bro
th-cam.com/video/YCD617NrtEw/w-d-xo.html
th-cam.com/video/TBdroZTX1kY/w-d-xo.html
Nine pointer is trying to make largest community of engineering students. Please like the video and subscribe the channel. The videos are helpful for all the engineering students. The videos are from the top IIT and NIT students . Also share it with students who are in need...
I ditto the comment below, thanks so much for this, I needed this. I really liked how your proved the code and javascript with F12. Awesome Job! Added to my favs!
th-cam.com/video/YCD617NrtEw/w-d-xo.html
th-cam.com/video/TBdroZTX1kY/w-d-xo.html
Nine pointer is trying to make largest community of engineering students. Please like the video and subscribe the channel. The videos are helpful for all the engineering students. The videos are from the top IIT and NIT students . Also share it with students who are in need...
Awesome tutorial! Thank you for this excelent video!
The background music though! 😍❤
Thanks you very much man. That was what i searched for a long time.
th-cam.com/video/YCD617NrtEw/w-d-xo.html
th-cam.com/video/TBdroZTX1kY/w-d-xo.html
Nine pointer is trying to make largest community of engineering students. Please like the video and subscribe the channel. The videos are helpful for all the engineering students. The videos are from the top IIT and NIT students . Also share it with students who are in need...
Fantastic Tutorial, with a excellent finish, thanks for sharing.👌
Thanks a million for this, God bless you bountifully
man you are awesome
I reall got to learn alot of things
Hello,
I just wanted to say that its brilliant tutorial.
Looking forward to see future videos about css tricks , like this transition :D
Hello, Thank you very much! ❤️
Stay tuned for more..
th-cam.com/video/YCD617NrtEw/w-d-xo.html
th-cam.com/video/TBdroZTX1kY/w-d-xo.html
Nine pointer is trying to make largest community of engineering students. Please like the video and subscribe the channel. The videos are helpful for all the engineering students. The videos are from the top IIT and NIT students . Also share it with students who are in need...
Just great! Thanks a lot!
Great Design. Your designs are very attractive. Nice work!
Thank you! ❤
Absolutely amazing man keep sharing and growing
Thank you so much for sharing this interactive image slider
Brilliant work as always 🙌 . if you do a fully responsive pur css ecommerce product card with pop up quick view . Man. I'd be so grateful . KEEP UP THE GREAT FLOW ❤
Thank you! ❤️ Nice idea.
th-cam.com/video/YCD617NrtEw/w-d-xo.html
th-cam.com/video/TBdroZTX1kY/w-d-xo.html
Nine pointer is trying to make largest community of engineering students. Please like the video and subscribe the channel. The videos are helpful for all the engineering students. The videos are from the top IIT and NIT students . Also share it with students who are in need...
Thank you brother. That was very very very helpful video. I searched this type of video many times but I can't find. And this video also help me to figure out more topic. Thanks again.
You're most welcome!
Hope you will upload this type of unique video continuesly.
I really enjoy your channel and you are a good teacher. I might have missed sotNice tutorialng and I don't get friends with the setuper. I worked
Great stuff, thank you very much!!
You're most welcome!
Really enjoying this tutorial...I’ve got a question.. what do you have to download to check the slider is active? as I’ve tried to create a slider but the buttons don’t work for me.
Thanks brothers love for Bangladesh!
You're most welcome! ❤
Thank you very much, amazing work
You're welcome!
thanks u, its works for me👌👌
the best tutor
Thank you sir. It is very helpful 💛💛
You're welcome! ❤
Great video! I had to put a z-index on .manual-btn. the .navigation-auto was obscuring the buttons.
Thanks man 👍
thank you you have solved a problem for me i pray to God to help you and bless you🥰
In a div content with display flex and width auto add the images with the size of the center frame, for example one image with the class "display", .display{width: 95vw; height: 95vh}, then the div_content{width: auto; height: 95vh; display:flex; flex-flow: row nowrap; justify-content:space-evenly; align.items: center }, the content div will grow depending on the number of images by their width of each one, then .center_frame{width: 95vw; height: 95vh; display:flex; flex-flow: row nowrap; justify-content:space-evenly; align.items: center; overflow:hidden}, this is how a manual slider looks:
let btn_menu = document.querySelectorAll(".btn_menu");
let displays = document.querySelectorAll(".display");
let mode_active = function (index) {
for (let i = 0; i < displays.length; i++) {
displays[i].style.transform = `translateX(${index * -100}%)`;
}
}
for (let i = 0; i < btn_menu.length; i++) {
btn_menu[i].addEventListener("click", function () {
mode_active(i);
});
}
Hey Bro, that´s really amazing!!!
Warm greetings from Brasil.
Thank you! ❤️
Thanks bro❤
buen video, saludos desde Mexico.
Good video, greetings from Mexico
Thank you very much! ❤️
Brilliant friend
Thank you very much for your tut. Anyway, what is the name of the code editor you are using? very interesting. Many thanks
I love it;
Good job sir..❤❤
Thank you! ❤️
This is great 👌
Thank you ❤️
Hey thanks for the video. Just wondering where is this thing the parameter "manual" in "var manualNav = function(manual)" getting the value from? Am I missing something here?
Nice one!!
Thank you ❤️
excellent tutorial Only small tip in last of your video you need to modify the conditions as once i clicked btn you need to set ( i ) to the new position. but great work.👏🏻👏🏻👏🏻👏🏻
Dude
just use a new variable j
initialize j = 1 on top
and assign j = i in btn.forEach function of Manual
Later replace all i with j in function of Automatic
Snippet:
let j = 1
var slides = document.querySelectorAll(".slide")
var btns = document.querySelectorAll(".btn")
let currentSlide = 1
var manualNav = function(manual){
slides.forEach((slide) => {
slide.classList.remove('active');
btns.forEach((btn) => {
btn.classList.remove('active');
})
})
slides[manual].classList.add('active');
btns[manual].classList.add('active');
}
btns.forEach((btn , i) => {
btn.addEventListener("click" , () =>{
manualNav(i);
currentSlide = i;
j = i
})
});
var repeat = function(activeClass){
let active = document.getElementsByClassName('active');
var repeater = () => {
setTimeout(function(){
[...active].forEach((activeSlide) => {
activeSlide.classList.remove('active')
})
slides[j].classList.add('active');
btns[j].classList.add('active');
j++;
if(slides.length == j){
j = 0;
}
if(j>= slides.length){
return;
}
repeater();
} , 5000);
}
repeater();
}
repeat();
bow beautiful
This is a great work but am having challenges on it cause the auto didn't function well on my system after checking it thoroughly. Please is their a way you can help me on this?
Keep up the good work 👍👍👍
Super broo :)
Thanks bro! ❤
good bro
peace be with you dear,
Good work,
my search ended for a slider without a heavy js library.
Thanks a lot, so nice of you..
A little more help is needed
this is not working in underscore wordpress.
Please consider to suggest the edits....
Thanks again!
thats cool
Thank you! ❤
Ótimo vídeo parabéns ✌.
Thank you! ❤
th-cam.com/video/YCD617NrtEw/w-d-xo.html
th-cam.com/video/TBdroZTX1kY/w-d-xo.html
Nine pointer is trying to make largest community of engineering students. Please like the video and subscribe the channel. The videos are helpful for all the engineering students. The videos are from the top IIT and NIT students . Also share it with students who are in need...
thank you
You're welcome!
Hello! Your sliders tutorial are great. I got one question though, is it possible to synchronize autoplay nav with manual nav? For exaple when i have 8 pictures I click manually on image 7th but autoplay is going back to second image because it only got that far. How to make autoplay go 8th instead of going back to were IT was? I know it is possible but do you know how? It would be a great addon because now this is a little annoying when you got more than 3-4 pictures. Looking forward to your reply, keep up the good work. Regards
Hello! I designed a new image slider tutorial according to your suggestion. Here's the link - th-cam.com/video/tphDji-XZCE/w-d-xo.html
thanks man.
but what are you using to code (app)
How do you add a play/pause button to it?
Actually after click on clip path my half text is not looking.and also bottom pointer not looking.why???what can I do???
Thanks for your very useful video. Can you make cycle and dragable slider pls. Hope to see your tutorial soon dear.
th-cam.com/video/YCD617NrtEw/w-d-xo.html
th-cam.com/video/TBdroZTX1kY/w-d-xo.html
Nine pointer is trying to make largest community of engineering students. Please like the video and subscribe the channel. The videos are helpful for all the engineering students. The videos are from the top IIT and NIT students . Also share it with students who are in need...
I received the code for the slider. Thanks. Can you tell me what I need to do to adjust the slider for photos with a size of 1900 x 850 px fullscreen so that I can embed the slider in a webpage? Thanks in advance for your tip
Thanks teacher, excellent class. I'm starting with this great language and I have a question, at minute 21:45 do you add [... active], what function or action does it perform? or what is your definition to investigate? Please. Thank you.
Thanks and welcome! Glad you like it.
[...active] = all active classes
It is for each of all current active classes to remove their active classes on timeout.
Read this -
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
th-cam.com/video/YCD617NrtEw/w-d-xo.html
th-cam.com/video/TBdroZTX1kY/w-d-xo.html
Nine pointer is trying to make largest community of engineering students. Please like the video and subscribe the channel. The videos are helpful for all the engineering students. The videos are from the top IIT and NIT students . Also share it with students who are in need...
I am getting this error in javascript "let current slide = 1; " can anyone can help and one more this how I can put this slider in my already made site thank you so much.
i love you .thanks
You're welcome 😊
im trying to find the issue since yestarday. does anybody else's images disappear for no aparent reason? i've checked the code many times, but it just doesn't work. thanksfor the video, it's very clear
how can i do different transitions in a loop?
What should be the image dimensions for this kind of project?
In order to make it responsive well in all devices.. kindly reply 🙏
So the problems is , when I slide manually it doesn't work on me, but when I go for inspection in chrome, active class for both slide and btn is working properly , but image doesn't slide . Why so
How I can add paragraph under of the slideshow , pls help nothing is shown what I should do to put paragraph under it
This image resolution??
sir how can we add those buttons vertically on the right side
There is a problem with this slider. Whenever I click a button it redirects but the loop continues from where it left
In active i have a prob in function(activeClass) error in there
Sir aap kon sa ye text editor use kar rahe jisme sath me output dikha raha hai naam bata dijiye
Remember me I am you very old subscriber btw still love your video
Yes, I remember. I am so glad to hear from you! Thank you! thank you very much for your support! ❤
After clicking on first button.. it's active last image and clicking on second button it's active last second image and wen i click third button,image is blank... please someone help
Please Please Please help!
I have implemented the code . On page load image carousel works fine , on page reload also works the same . but when I routed to a different page through a button click and came back , the image carousel - ( Slide active ) property gets out of sync . The time frame remains 10s , but as soon as a slide becomes active , after 2 seconds only 'active' gets removed , and for 8 seconds we can only see the image slider background of grey color.
I thought it was because of some memory spillage , so I destroyed the component and function as soon as I move out of the current component where Carousel is being used ( using ngOnDestroy ) , but that didnt solve anything. On page reload again when Image Carousel Component loads, it again works as it should properly, its just during routing to another page and back , that the slide active property gets out of sync ! Please help
Great video but Nothing is working for me I tried to do everything I don't know if my problem is on inspect I don't knw what to do there is a it to copy the butting and paste it in the code or what what did you do there?
who can i set the image in full screen
Hi, nice video! How can I add that if slide is changed manually it won't chage it automatically for some time? Because sometimes when I click, it changes to in the same time next slide.
th-cam.com/video/YCD617NrtEw/w-d-xo.html
th-cam.com/video/TBdroZTX1kY/w-d-xo.html
Nine pointer is trying to make largest community of engineering students. Please like the video and subscribe the channel. The videos are helpful for all the engineering students. The videos are from the top IIT and NIT students . Also share it with students who are in need...
Hey - great Video! I love the look of the slider! Am I allowed to use this in my own project?
Thank you! Okay, you can use it.
or is it for soft pro or sotNice tutorialng
Hi I wonder what is the code editor you use? I would appreciate if you told me, I already subscribed and I liked it
Please
I'm sorry if my English is horrible, I'm from Mexico, greetings
Thank you! ❤️. It's the atom editor.
Thanks
can anyone send me the code i followed the video but now nothing is working
please explain line 97 in html.index. Thanks
How to preview
Hello everybody. I have a question that is in the video. "slides" is a Nodelist. Why did he use methods ( forEach ) ?
It's Array that is TRUE
Can you make an admin panel plz
Yesssssssssssssssssssssss
can you add next and previous navigation arrows to this please?
Will do!
Hello there, I designed a new image slider tutorial according to your request. Here's the link - th-cam.com/video/tphDji-XZCE/w-d-xo.html
Not Run mobile safari i need help thanks for reply.
How do we add more slides or increase it? I just followed your carousel video, I played with it for a bit but cant seem to add more images or slides, tia
You need to change the HTML code for additional images.
@@CodingSnow Awesome. I was looking at the wrong side and figured it out. Thanks for your quick response. This one of the best channels I've come across.
@@kieran2347 You're most welcome my friend.
I used this in some of my own prebuilt code and for some reason it wont go in the center. Any suggestions?
Try it by changing the selectors like below.
body{
height: 100vh;
background: #1D212B;
}
.img-slider{
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 800px;
height: 500px;
margin: 10px;
background: #1D212B;
}
Everything is working great except
when i tried to make slider full width to container and height auto
my page content move upward behind the slider.
there is not any float used in css, unable to figured what's causing this behaviour.
Pleeeeeeaaaase suggest the solution.
Thanks a LOT..!
Al Hamdolillah!
I figured out the solution for auto height of image slider and i am posting here for others in need.
Instead of height property use aspect ratio with respect to your slider images.
Coding Snow once again thanks for your work...
Do Good and Have Good.
hello! How can i make the photos to be full screen, not just a little like in the vid? Thx!
object-fit: cover;
Hi, how can I speed up the waiting time for the next slide? (Refering to the autoplay part)
Hi, In the index.html file > line 104
Set the time you want in milliseconds. On the tutorial it's 10000ms.
@@CodingSnow Thank you! Keep up the great content. I appreciate it a lot as I just started learning web dev.
@@oxygen02 You're welcome! ❤️
th-cam.com/video/YCD617NrtEw/w-d-xo.html
th-cam.com/video/TBdroZTX1kY/w-d-xo.html
Nine pointer is trying to make largest community of engineering students. Please like the video and subscribe the channel. The videos are helpful for all the engineering students. The videos are from the top IIT and NIT students . Also share it with students who are in need...
nice tuto lmfaoo
hey man, best video ever. But i have a question, the automatic slide is working just fine but when it gets to the last picture, it doesn't start over again automatically and it throws me this error : script.js:33 Uncaught TypeError: Cannot read properties of undefined (reading 'classList') . Any suggestion how can i solve this ?
@brother even i am Getting same error..
I solved the issue, actually i had an english problem… instead of “… .length”, i was typing “… .lenght” 😅😅
Hii
auto navigation is perfectly working but during manual navigation slide 1 is not shown and last button shows no slide how to resolve this
Hi, It will work, follow the tutorial and check the source code closely.
is this responsive?
it doesn't work
Plz help me
sir code
Doesn’t tNice tutorials program cost like 100$ ?
is it responsive tho ?
Yes, it is.
These intros are so long
What did you mean by "intros"? starting intro or the design presenting time?
@@CodingSnow the amount of time showing us the finished product in the beginning. You don't need to click to another slide 20 times. Click a few slides, show us how it works and then get into the code. I actually left this video because I got bored and haven't even watched the rest of it yet
It's not just you I see this happen on several of these coding channels.
I really like your channel BTW I'm not trying to be mean
@@JamesWelbes Did you see that there is an autoplay function in the slider? It's like a timeout loop. So I have to wait for all the slide transitions. And I have to show you how both autoplay and manual functionalities are working together. That's Why I click some times randomly. So please don't think about that time. It just because I wanted to show you all the functionalities clearly 🙂.
Good job bro JESUS IS COMING SOON;PREPARE