Image Slider - With Auto-play & Manual Navigation Buttons - Using CSS, HTML & Javascript

In the video below, is a very good tutorial to create an image slider program using HTML, CSS and Javascript extremely simple and professional including many features such as: Auto-play, navigation buttons next and prev .
The channel is building full series learning HTML CSS and Javascript
-----------------
Download code: www.lundevweb....
-----------------
CSS Basic: • Top 3 selector CSS qua...
-----------------
Effect CSS Only: • Create Modal Popup usi...
-----------------
Design Slider - Carousel HTML CSS: • Animation Card Slider ...
-----------------
Design Effect HTML CSS Javascript: • Animation slideshow Ht...

[@design_coding_studio]

worthful video to learn slideshow with javascript

[@MadFaker]

Even I don't understand vietnamese I still understand a little bit how the code works. Thank you!

[@lundeveloper]

Thank you so much ❤️

[@Danachew]

I did a double take when you got to the last image in the slider, because that forest shot has been my desktop background for the past like 3 years 🤣
I can't wait to build this one out!

[@lundeveloper]

A lot of video slider - carousel th-cam.com/video/Xh-wIMqohD0/w-d-xo.html

[@kholoudbelhadj]

coudlnt understand a word from what he says but the tutorial works

[@tuhoccodethietkeweb4598]

sao lại k hiểu nhỉ, thấy cũng dễ hiểu mà nhỉ

[@aswinjprakash6325]

​@@tuhoccodethietkeweb4598we don't speak Vietnamese

[@snoopboy4692]

damnn.... this guy is crazy. he knows how to make something amazing like its nothing. Respect. I am using this slider in my website

[@Buttergaming_channel]

hướng dẫn hay và cụ thể rõ bước quá cám ơn anh ạ, VIDEO RẤT RÕ RÀNG CỤ THỂ VÀ DỄ HIỂU ĐÚNG Ý

[@ভোমরা]

Love from Bangladesh🇧🇩

[@lundeveloper]

Thank you From VietNam 🇻🇳

[@bibibevilacqua139]

this was the only slider tutorial that worked for me. Super clear and didatic, thank you so much! 😄

[@lundeveloper]

😘😘😘 Thank you 😍😍😍

[@YamiKeizerLeon]

Thank you so much, literally the only one that works properly! Was searching for 5 hours 😌

5:53 cảm ơn bạn đã lắng nghe và sửa đổi. :):)

[@lundeveloper]

^^

[@alphamx13]

Looks Awesome! Thank you for sharing my friend !

[@kantetam_6076]

cảm ơn bạn vì những kiến thức này

[@lundeveloper]

🥰🥰

[@uyletruong9091]

Anh zai giảng kĩ phết, dễ hiểu hẳn

[@thuongcao37]

Anh chỉ rất chi tiết và dễ hiểu, cảm ơn anh rất nhiều.

[@saviovnn]

Ajudou muito LIKE!

[@FrisarandaDiouf]

it's awesome dude, thank you!

[@MichaelDunsin]

Lovely video..
But I would have enjoyed it more if there was an English subtitle or any way to inculcate some English into your videos

[@BetterCallHim]

goodjob man.

[@porkdev]

💯

[@maleeme836]

Thank +++

[@lundeveloper]

💌

[@hoangnhat93]

uầy đúng thứ đang cần luôn. 💖💖💖💖💖💖

[@lundeveloper]

Tuyệt vời luôn 🥰🥰

[@quannguyenhong2112]

Quá đỉnh luôn a ơi. Mò mấy ngày nay:)

[@lundeveloper]

Thank you bro 🥰🥰

[@hoangg04]

hay quá a

[@lundeveloper]

Thank you 😍😍

[@zaheerabbas8344]

love from pk

[@lundeveloper]

Thank you ❤️❤️

[@hiepdz7704]

Hay quá a ơi

[@lundeveloper]

😍😍😍

[@kamaboko1]

Solid tut!

[@zuong_tu]

uầy đúng thứ đang cần luôn. 💖💖💖💖💖💖 CẢM ƠN ANH NHÁ

[@lundeveloper]

Ô kì ^^

Hay quá anh ơi like và sub liền mong anh ra nhiều tip như này nữa

[@lundeveloper]

Thank you so much 😍😍😍

[@tuannguyenthe-xw1xj]

hay quá! mình muốn thêm chức năng nhấn chuột rồi kéo ảnh sang phải hoặc trái thì hình ảnh cũng trượt theo thì làm thế nào nhỉ?

[@davides3610]

Good job man

[@huyvu-pt3md]

qua tuyệt vời

[@girlsgamecityofficial3978]

Can you add button on this slide please like play now or watch later button on every slide...make a video on this topic please

[@lll-vq6pm]

hello your vscode editor is so beautiful! 🤩🤩 what extension is that gradient effect?

[@lyrxdev9090]

I think its SynthWave '84 theme

[@lll-vq6pm]

@@lyrxdev9090 thankyouuu

[@GODOFCALCULUS]

You can make this as the home section with a nav instead of this

[@Autumn4-4]

Hay Vãi Ò

[@lundeveloper]

kekeke 😁

[@Autumn4-4]

@@lundeveloper anh chỉ làm chữ xuất hiện trên web mỗi khi lướt xuống ik (kiểu chữ rõ dần xuất hiện từ trái sang phải hoặc ngược lại hay thì dưới lên)

[@Autumn4-4]

trông nó đẹp và tinh tế hơn cho web

[@babala9]

I dont know to say thank you in your Language but thank you so much

[@lundeveloper]

Thanks a lot. This is another video from Recent videos are all in English 🥰

[@nguyenkhang9651]

cái này bữa em làm bằng React mà ko hiểu á anh , anh có thể làm 1 clip code bằng cái này mà là React được ko ạ

[@lundeveloper]

Oke nè nếu có thời gian 😍

[@softlip]

đúng lúc e đang làm cái này tham khảo đc khá nhiều, nhưng cái em cần làm nó lại có thêm cái này: vidu tới được slide cuối khi mình ấn next thì nó sẽ chạy sang phải tiếp á anh và ngược lại ở slider đầu khi ấn pre thì nó sẽ chạy sang phải á, kiểu vòng lặp liên tục á ah, anh có cách nào làm được như vậy k ạ

[@tanveerahmed8355]

Clip này có thêm infinity slider nữa là full chức năng rồi

[@huyphamvan5390]

A thử hướng dẫn Slider như web Cellphones đi a, chứ dùng plugin lỗi quá

[@lundeveloper]

oke nè 🤩

[@duonghoangphu7689]

Có cách nào cho nó ifinity roll không a? Kiểu roll đến cái cuối rồi nó vẫn nhảy tiếp mà cái tiếp là cái đầu tiên không a?

[@lundeveloper]

E vào trang xem những slider khác nhé, trong danh sách phát slider, rất nhiều video nói về cách infinity

[@duonghoangphu7689]

@@lundeveloper trang của a à

[@duonghoangphu7689]

@@lundeveloper chổ nào ă a, a cho e cái link đuoc hog

[@husnainandco]

Or share some link to download complete code?

[@doquanh7240]

yeu anh lun dev

[@lundeveloper]

yeu emmmmmmmmm 😅

[@123hfksue3]

cái này nếu mình muốn show ảnh dọc thì làm sao v bạn

[@huyhoang6414]

tại sao mình lại bị báo lỗi ngay net.onclick = function () nhỉ

[@MayisTHU]

em vẫn luân tìm cách để slider có thể chạy vĩnh viễn (là luôn chạy về một hướng mà không giật về) , nghĩa là khi slider chạy đến ảnh cuối cùng thì nó vẫn chạy tiếp chứ nó không chạy ngược lại cái ảnh đầu tiên , trong bài của anh khi nó chạy ngược về ảnh 1 nhìn sẽ hơi rối mắt. Em vẫn đang tìm cách mà vẫn chứ tìm ra .

[@lundeveloper]

Nếu muốn làm kiểu đó thì e xem logic này nhé th-cam.com/video/Y3s0_Vy6Uy0/w-d-xo.html

[@trandat6078]

anh ơi giúp e với ạ, e làm theo nhưng đến đoạn bấm next thì nó chuyển ảnh hiện tại nhưng lại không hiện ảnh tiếp theo ạ😢

[@lundeveloper]

Em tải code trong phần mô tả của video về để đối chiếu với code mình nhé

[@tanhoangtrong2262]

nếu mà muốn phải đợi slide chạy xong thì mới next hoặc prev đc thì làm ntn ạ

[@lundeveloper]

Trong cái function next click và prev click. Khi người dùng click vào em tiến hành disable 2 button đó đi để ng dùng ko click dk. Và sau 3 giây xoá hiệu ứng disable đó đi để ng dùng click lại bình thường bằng chức năng setinterval

[@tanhoangtrong2262]

@@lundeveloperok a

[@phamnam8688]

Giúp em với em viết y hệt nhưng kg hiểu sao kg chạy đc

[@lundeveloper]

trong phần mô tả video có link tải code á e. Tải về đối chiếu với code mình làm nhé

[@ahmadarroziqi2484]

what is your vs code theme bro?

[@lyrxdev9090]

I think its SynthWave '84 theme

[@kiriikgamming2055]

next.onclick = function()
cụm này báo sai làm sao đây mn

[@No7awel]

same

[@kiriikgamming2055]

khai báo js xuống phần body là hết nhé
@@No7awel

[@tomleverkusenmusicofficial6902]

Anh ơi em bị lỗi cái dấu anh ạ

[@phonginhvan6251]

anh làm về animation scroll đi a

[@lundeveloper]

Anh làm nhiều rồi á. Em vô kênh xem nhé. Hoặc có 1 video này nè Background 3D effect Parallax Scrolling using HTML CSS only
th-cam.com/video/ygXHJErcJx8/w-d-xo.html

[@NguyenTrungHieu14078]

bạn ơi đổi cái màu giao diện VS code như bạn kiểu j vậy

[@lundeveloper]

Trong trang youtube của mình có video hướng dẩn đó

[@NguyenTrungHieu14078]

@@lundeveloper vid nào v mik hok tìm thấy

[@Bepawn]

Làm thế nào để giảm thời gian trượt

[@husnainandco]

Can you send code to me?

[@binhdeveloper203]

anh chia sẻ nó cuốn cuốn kiểu gì ấy

[@lundeveloper]

hihi cảm ơn em nhiều nè

[@heloo932]

can yo send the source code

[@waifu308]

hi a

[@lundeveloper]

Hello em 😍

[@Nikita-u1f]

Нихуя не понял но спасибо!

[@YunaCrystal3009]

Clip này có thêm infinity slider nữa là full chức năng rồi

[@lundeveloper]

Lúc làm hong nghĩ tới 😅