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

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

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

50% 1

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

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

28 сен 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@Danachew 6 месяцев назад

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!

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

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 10 месяцев назад

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 Ý

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

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

@tuhoccodethietkeweb4598 9 месяцев назад

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

@aswinjprakash6325 9 месяцев назад

@@tuhoccodethietkeweb4598we don't speak Vietnamese

Год назад

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

@lundeveloper Год назад

@MichaelDunsin 6 месяцев назад

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

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

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

@tuannguyenthe-xw1xj 5 месяцев назад

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ỉ?

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

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

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

🥰🥰

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

goodjob man.

@hoangnhat93 Год назад

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

@lundeveloper Год назад

Tuyệt vời luôn 🥰🥰

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

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

@hoangg04 Год назад

hay quá a

@lundeveloper Год назад

Thank you 😍😍

@hiepdz7704 Год назад

Hay quá a ơi

@lundeveloper Год назад

😍😍😍

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

Thank +++

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

💌

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

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

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

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

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

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

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

Or share some link to download complete code?

@tanveerahmed8355 Год назад

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

@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

@doquanh7240 9 месяцев назад

yeu anh lun dev

@lundeveloper 9 месяцев назад

yeu emmmmmmmmm 😅

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

Can you send code to me?

@Bepawn 8 месяцев назад

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

@binhdeveloper203 Год назад

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

@lundeveloper Год назад

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

@MadFaker 5 месяцев назад

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

@lundeveloper 5 месяцев назад

Thank you so much ❤️

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

@lundeveloper Год назад

A lot of video slider - carousel ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Xh-wIMqohD0.html

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

@123hfksue3 3 месяца назад

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

@Nikita-u1f 7 месяцев назад

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

@heloo932 5 месяцев назад

can yo send the source code

@kiriikgamming2055 8 месяцев назад

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

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

same

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

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

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

@trandat6078 5 месяцев назад

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 5 месяцев назад

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

@ভোমরা Год назад

Love from Bangladesh🇧🇩

@lundeveloper Год назад

Thank you From VietNam 🇻🇳

@tomleverkusenmusicofficial6902 6 месяцев назад

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

@GODOFCALCULUS 5 месяцев назад

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

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

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 4 месяца назад

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 3 месяца назад

@@lundeveloper trang của a à

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

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

@design_coding_studio 2 месяца назад

worthful video to learn slideshow with javascript

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

Looks Awesome! Thank you for sharing my friend !

@FrisarandaDiouf 6 месяцев назад

it's awesome dude, thank you!

@lll-vq6pm Год назад

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

@lyrxdev9090 9 месяцев назад

I think its SynthWave '84 theme

@lll-vq6pm 8 месяцев назад

@@lyrxdev9090 thankyouuu

@YamiKeizerLeon 8 месяцев назад

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

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

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

@huyphamvan5390 Год назад

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

@lundeveloper Год назад

oke nè 🤩

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

Ajudou muito LIKE!

@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

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

Anh chỉ rất chi tiết và dễ hiểu, cảm ơn anh rất nhiều.

@bibibevilacqua139 9 месяцев назад

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

@lundeveloper 9 месяцев назад

😘😘😘 Thank you 😍😍😍

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

💯

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

what is your vs code theme bro?

@lyrxdev9090 9 месяцев назад

I think its SynthWave '84 theme

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

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

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

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

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

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

@huyvu-pt3md Год назад

qua tuyệt vời

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

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

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

Thank you bro 🥰🥰

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