117 Views· 04/27/24· People & Blogs
Create A Slider Crazy Effects Using HTML CSS And Javascript
In this video, let's join Lun Dev to Create A Slider Crazy Effects Using HTML CSS And Javascript with extremely cool effects, along with the most outstanding and complete functions of a slider: Allows manipulation of navigation buttons to change the displayed image, A horizontal bar used to count down the running time of an animation, Creating an endless loop helps users click next forever but will never run out of sliders, And automatically switch slider after specified time, This design has also been made Responsive so it works well on different screens.
Step By Step in this video:
00:00 Intro
00:13 Describe project
01:58 Setup proejct
02:23 Create and Design Header
04:05 Create and Design List Item Carousel Slider
08:10 Create and Design List thumbnail Carousel Slider
09:51 Create and Design button next and Prev
11:06 Active Item Slider and Create Animation Content
12:51 Effect Animation when Click Next button in CSS
15:20 Effect Animation when Click Prev Button in CSS
17:40 Create element running when slider active
18:35 Responsive
19:10 Setup Javascript
19:35 Event next button click
21:35 Event prev button click
23:14 Set Slider Auto run
Download Code and Image: https://www.lundevweb.com/2023..../11/design-effect-ma
-----
This youtube channel not only revolves around topics about website programming using HTML CSS Javascript, but also website design, ideation and implementation.
All codes are free. Sharing will help us grow faster.
#slider #carousel #css
-----
Design Slider - Carousel web: https://www.youtube.com/watch?v=Xh-wIMqohD0&list=PLe28tn1x4EIZE0Rp8xakXrvPY7m63_6Oc&pp=gAQBiAQB
Design Template Website: https://www.youtube.com/watch?v=z-YZU9xB9A8&list=PLe28tn1x4EIZsAP6Bjo-gHEJDHQ7jho1o&pp=gAQBiAQB
Design Parallax SCrolling Effect: https://www.youtube.com/watch?v=LlPQk6ajrnE&list=PLe28tn1x4EIbqW7C8iZ4vw7PonCHbw0Kd&pp=gAQBiAQB
Effect Image using HTML CSS Javascript: https://www.youtube.com/watch?v=R36sxK0STUg&list=PLe28tn1x4EIa-CSr0p6y1ciWcRJfa2DiO&pp=gAQBiAQB
Design Animation Menu Web: https://www.youtube.com/watch?v=29jWRcanWKQ&list=PLe28tn1x4EIYQa4JZJWJcvVD-oske28RQ&pp=gAQBiAQB
Design Effect Card: https://www.youtube.com/watch?v=r-gWdFSTDus&list=PLe28tn1x4EIa4b3MNasOQXkXDO8tkEaTN&pp=gAQBiAQB
There are many other series: https://www.youtube.com/@lundeveloper/videos
-----
Contact With me:
Instagram: https://www.instagram.com/lundev.web
Email: hohoang.dev@gmail.com
Buy me a cup of coffee by clicking the thanks button on any video. Thank you very much for your support.
0 Comments