Responsive Image Slider | With Manual Button & Auto-play Navigation Visibility - HTML CSS Javascript

Подписаться 50 тыс.

Просмотров 178 тыс.

50% 1

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 [NCS R...
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.

Опубликовано:

12 ноя 2020

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 170

@benuliniboy1 3 года назад

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!

@CodingSnow 3 года назад

You're most welcome! ❤

@LetsBland9411 2 года назад

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

@SeamusFitzpatrick 2 года назад

Very good and easy to follow tutorial, really THANK YOU!!! and love the tracks playing on in the background, nice selection!!!

@marcioaugusto392 3 года назад

Awesome tutorial! Thank you for this excelent video!

@michelletowner9884 3 года назад

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.

@josejohnhalindogo8336 3 года назад

The background music though! 😍❤

@haxMat 3 года назад

Hello, I just wanted to say that its brilliant tutorial. Looking forward to see future videos about css tricks , like this transition :D

@CodingSnow 3 года назад

Hello, Thank you very much! ❤️ Stay tuned for more..

@yuktagajeshwar2536 Год назад

ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YCD617NrtEw.html ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-TBdroZTX1kY.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...

@vinnypassmore5657 10 месяцев назад

Fantastic Tutorial, with a excellent finish, thanks for sharing.👌

@sazz.g 3 года назад

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?

@vanessacarey6265 2 года назад

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!

@yuktagajeshwar2536 Год назад

@osifesoayodeji4503 2 года назад

Apart from getting what I exactly needed, I still learnt another vital thing, clip path. Thanks bro

@yuktagajeshwar2536 Год назад

@samuelk1623 3 года назад

Great Design. Your designs are very attractive. Nice work!

@CodingSnow 3 года назад

Thank you! ❤

@pranavbakare8922 2 года назад

Absolutely amazing man keep sharing and growing

@user-sg7dn9wz2r 8 месяцев назад

Just great! Thanks a lot!

@ricardoraulsevillalazaro1833 2 года назад

Thanks you very much man. That was what i searched for a long time.

@yuktagajeshwar2536 Год назад

@chinnguyen8944 Год назад

Thank you very much for your tut. Anyway, what is the name of the code editor you are using? very interesting. Many thanks

@hassenhamrouni2147 3 года назад

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 ❤

@CodingSnow 3 года назад

Thank you! ❤️ Nice idea.

@yuktagajeshwar2536 Год назад

@giftmanyo7919 2 года назад

Thanks a million for this, God bless you bountifully

@user-ob9vx3nd3t 3 месяца назад

Thank you so much for sharing this interactive image slider

@vedantkadam2147 2 года назад

man you are awesome I reall got to learn alot of things

@rashidulislam1362 2 года назад

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.

@CodingSnow 2 года назад

You're most welcome!

@rashidulislam1362 2 года назад

Hope you will upload this type of unique video continuesly.

@eduardohenriquedeassis9729 2 года назад

Hey Bro, that´s really amazing!!! Warm greetings from Brasil.

@CodingSnow 2 года назад

Thank you! ❤️

@kringe3394 2 года назад

thanks man. but what are you using to code (app)

@sankardalui8374 Год назад

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

@fasteditsyt 7 месяцев назад

Great video! I had to put a z-index on .manual-btn. the .navigation-auto was obscuring the buttons.

@AbdallahElhussin Месяц назад

thank you you have solved a problem for me i pray to God to help you and bless you🥰

@sanjayakumar8219 3 года назад

Thank you sir. It is very helpful 💛💛

@CodingSnow 3 года назад

You're welcome! ❤

@empoweredman3371 3 года назад

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

@CodingSnow 3 года назад

Hello! I designed a new image slider tutorial according to your suggestion. Here's the link - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-tphDji-XZCE.html

@atom3968 3 года назад

Great stuff, thank you very much!!

@CodingSnow 3 года назад

You're most welcome!

@AhmedIbrahim-mm3hw 2 года назад

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

@HelloWorld-vr5dw 2 года назад

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();

@hembromjohn 7 месяцев назад

What should be the image dimensions for this kind of project? In order to make it responsive well in all devices.. kindly reply 🙏

@Mehedihasan-nt5zk 3 года назад

Thanks brothers love for Bangladesh!

@CodingSnow 3 года назад

You're most welcome! ❤

@rubenreyes8220 3 года назад

buen video, saludos desde Mexico. Good video, greetings from Mexico

@CodingSnow 3 года назад

Thank you very much! ❤️

@chibuikeoffu 3 года назад

Thank you very much, amazing work

@CodingSnow 3 года назад

You're welcome!

@Triple_A1 Год назад

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

@ValeraJava1 3 года назад

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.

@CodingSnow 3 года назад

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

@yuktagajeshwar2536 Год назад

@layyly 2 года назад

the best tutor

@pathmashanthasenanayaka3193 3 года назад

Good job sir..❤❤

@CodingSnow 3 года назад

Thank you! ❤️

@romuloalves9349 3 года назад

Ótimo vídeo parabéns ✌.

@CodingSnow 3 года назад

Thank you! ❤

@yuktagajeshwar2536 Год назад

@kamdanibwp Год назад

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!

@Actor_mp Год назад

thanks u, its works for me👌👌

@mohammedsufiyan5164 Год назад

Thanks man 👍

@mukeshyogibhakt6520 3 года назад

Sir aap kon sa ye text editor use kar rahe jisme sath me output dikha raha hai naam bata dijiye

@shahidafwan1102 Год назад

Brilliant friend

@usamaali-ln7mr Год назад

Thanks bro❤

@wolfenrico 11 месяцев назад

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

@MohammedAhmed-iz9cr Год назад

bow beautiful

@shubhammorvekar5557 3 года назад

This is great 👌

@CodingSnow 3 года назад

Thank you ❤️

@patrick.1943 2 года назад

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.

@yuktagajeshwar2536 Год назад

@manhcuongvu5999 3 года назад

Thanks for your very useful video. Can you make cycle and dragable slider pls. Hope to see your tutorial soon dear.

@yuktagajeshwar2536 Год назад

@Vincentvisuals 2 года назад

Nice one!!

@CodingSnow 2 года назад

Thank you ❤️

@who.is.chandra Год назад

I love it;

@turkishmusic4585 2 года назад

How I can add paragraph under of the slideshow , pls help nothing is shown what I should do to put paragraph under it

@LetsBland9411 2 года назад

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?

@jonauriel2010 3 года назад

Hi I wonder what is the code editor you use? I would appreciate if you told me, I already subscribed and I liked it

@jonauriel2010 3 года назад

Please

@jonauriel2010 3 года назад

I'm sorry if my English is horrible, I'm from Mexico, greetings

@CodingSnow 3 года назад

Thank you! ❤️. It's the atom editor.

@jonauriel2010 3 года назад

Thanks

@sayalideep8688 3 года назад

Actually after click on clip path my half text is not looking.and also bottom pointer not looking.why???what can I do???

@SameerKumar-ee4qj 3 года назад

Remember me I am you very old subscriber btw still love your video

@CodingSnow 3 года назад

Yes, I remember. I am so glad to hear from you! Thank you! thank you very much for your support! ❤

@OMER3-1-3 2 года назад

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.

@nirmalas9939 3 года назад

thank you

@CodingSnow 3 года назад

You're welcome!

@matteolu 3 года назад

Hey - great Video! I love the look of the slider! Am I allowed to use this in my own project?

@CodingSnow 3 года назад

Thank you! Okay, you can use it.

@devcode9715 3 года назад

thats cool

@CodingSnow 3 года назад

Thank you! ❤

@kchksj6163 3 года назад

How do you add a play/pause button to it?

@djstyffhaiti Год назад

good bro

@youtubehelper227 3 года назад

Super broo :)

@CodingSnow 3 года назад

Thanks bro! ❤

@mukul13197 2 года назад

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

@GoodBoy-xb8kd Год назад

This image resolution??

@Erika-ks5lp 2 года назад

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

@kacperkepinski4990 3 года назад

how can i do different transitions in a loop?

@kieran2347 3 года назад

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

@CodingSnow 3 года назад

You need to change the HTML code for additional images.

@kieran2347 3 года назад

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

@CodingSnow 3 года назад

@@kieran2347 You're most welcome my friend.

@Neighbour11 Год назад

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

@engamer0787 Год назад

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

@speedcoding1104 2 года назад

There is a problem with this slider. Whenever I click a button it redirects but the loop continues from where it left

@stefancheroiu8732 Год назад

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 ?

@financialdumps Год назад

@brother even i am Getting same error..

@stefancheroiu8732 Год назад

I solved the issue, actually i had an english problem… instead of “… .length”, i was typing “… .lenght” 😅😅

@sonalidixit6663 3 года назад

sir how can we add those buttons vertically on the right side

@dragosdimitrie7368 2 года назад

hello! How can i make the photos to be full screen, not just a little like in the vid? Thx!

@amjad7436 Год назад

object-fit: cover;

@christianbaffour7921 3 года назад

i love you .thanks

@CodingSnow 3 года назад

You're welcome 😊

@lira5809 2 года назад

In active i have a prob in function(activeClass) error in there

@oxygen02 3 года назад

Hi, how can I speed up the waiting time for the next slide? (Refering to the autoplay part)

@CodingSnow 3 года назад

Hi, In the index.html file > line 104 Set the time you want in milliseconds. On the tutorial it's 10000ms.

@oxygen02 3 года назад

@@CodingSnow Thank you! Keep up the great content. I appreciate it a lot as I just started learning web dev.

@CodingSnow 3 года назад

@@oxygen02 You're welcome! ❤️

@yuktagajeshwar2536 Год назад

@rajpawar2221 4 месяца назад

who can i set the image in full screen

@nat17380 3 года назад

can you add next and previous navigation arrows to this please?

@CodingSnow 3 года назад

Will do!

@CodingSnow 3 года назад

Hello there, I designed a new image slider tutorial according to your request. Here's the link - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-tphDji-XZCE.html

@epitomeofsalt1648 3 года назад

I used this in some of my own prebuilt code and for some reason it wont go in the center. Any suggestions?

@CodingSnow 3 года назад

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; }

@mikailsumenoglu548 3 года назад

Not Run mobile safari i need help thanks for reply.

@kamdanibwp Год назад

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

@kamdanibwp Год назад

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.

@apoorvmishra1900 3 года назад

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

@CodingSnow 3 года назад

Hi, It will work, follow the tutorial and check the source code closely.

@gelexblazeshorts7679 Год назад

or is it for soft pro or sotNice tutorialng

@milissachalmers4940 2 года назад

please explain line 97 in html.index. Thanks

@abdullahbhatti4571 3 года назад

Can you make an admin panel plz

@papigaming1180 11 месяцев назад

Yesssssssssssssssssssssss

@harshilamin9825 3 месяца назад

can anyone send me the code i followed the video but now nothing is working

@cuonggt2941 2 года назад

Hello everybody. I have a question that is in the video. "slides" is a Nodelist. Why did he use methods ( forEach ) ?

@cuonggt2941 2 года назад

It's Array that is TRUE

@piikachu196 2 года назад

How to preview

@tabitasimorangkir3754 3 года назад

is this responsive?

@georges-anthonyorsot6813 2 месяца назад

it doesn't work

@user-li1hs8cs6k Год назад

nice tuto lmfaoo

@gauravey1722 Год назад

Doesn’t tNice tutorials program cost like 100$ ?

@testchannel7062 3 года назад

is it responsive tho ?

@CodingSnow 3 года назад

Yes, it is.

@MuhammadUsman-fz7bt 2 года назад

sir code

@sayalideep8688 3 года назад

Plz help me

@JamesWelbes 3 года назад

These intros are so long

@CodingSnow 3 года назад

What did you mean by "intros"? starting intro or the design presenting time?

@JamesWelbes 3 года назад

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

@JamesWelbes 3 года назад

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

@CodingSnow 3 года назад

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