Responsive Image Slider Website Design | Right/Left Nav, Autoplay & Pagination - Html CSS Javascript

Опубликовано: 18 Июнь 2024
на канале: Coding Snow

4,415

169

Responsive Image Slider Website Design 🖼️ | With Right /Left & Auto-play Navigation, Slide Visibility Indicator Bar & Slide Pagination With Infinite Loop (No Plugins) - HTML, CSS & Javascript

In this tutorial, you will learn how to create a responsive image slider with functional left and right arrows, autoplay navigation, a slide visibility indicator bar, and slide pagination using HTML, CSS, and JavaScript without using any plugins. I hope you will enjoy this amazing project and learn something valuable.

+Like and Subscribe 🔔 for More! ❤️❄️

◾Get This Project Source Codes -   / responsive-image-slider-website-right-239581

💙 Become a Member to Get All Source Codes -   / codingsnow

✔️ Clear Coding
✔️ Easy to Follow

📚 Chapters
----------------------------
0:00 - Intro
0:19 - Project Demo
4:08 - File Setup
4:36 - Slider First Slide (Html, Css)
23:50 - Slider Social Media Icons (Html, Css)
27:35 - Slider Left/Right Navigation (Html, Css)
31:05 - Slider Pagination Buttons (Html, Css)
33:09 - Slide Visibility Indicator Bar (Html, Css)
35:00 - Slide Video Modal (Html, Css)
42:23 - Add All Slides (Html)
49:07 - Limit Slide Paragraph Text And Add "..." + Read More Button (Javascript)
52:50 - Limit Video Modal Paragraph Text And Add "..." + Read More Button (Javascript)
54:49 - Slider Next Button Navigation (Javascript)
1:01:49 - Animate Slide Elements On Transition (Html, Css)
1:10:54 - Slider Prev Button Navigation (Javascript)
1:12:19 - Show First Slide On Page Load (Html, Javascript)
1:16:15 - Indicate Slider Pagination (Css)
1:17:01- Slide Visibility Indicator Bars (Css)
1:18:12 - Slider Auto-play (Javascript)
1:20:35 - Interconnect Slider Autoplay With Next/Prev Navigation (Javascript)
1:21:50 - Slider pagination (Javascript)
1:24:19 - Slider Video Modals Open and Close Functionalities (Javascript, Css)
1:40:53 - Slider Media queries (Css)

∎ Download File Setup (With Project Images And Videos) - https://www.codingsnow.com/2024/06/tu...

Hire Me 🔖
-----------------------
∎ Hire me to customize this project for your purpose - https://www.buymeacoffee.com/codingsn...
∎ Hire me to Fix your project Bugs & Issues - https://www.buymeacoffee.com/codingsn...
∎ Hire me to Convert your Figma, PSD, and XD Design to an HTML Website - https://www.buymeacoffee.com/codingsn...

Support My Works ❤️❄️
--------------------------------------------
∎ Buymeacoffee - https://www.buymeacoffee.com/codingsnow
∎ Patreon -   / codingsnow

∎ Download File Setup - https://codingsnow.com
∎ Download All Source Codes On Patreon -   / 106406195
∎ Facebook Page -   / codingsnow
∎ Instagram -   / coding.snow
∎ Support From Paypal - https://paypal.me/codingsnowget

🔗External Sources
------------------------------------
∎ Image & Video Source - https://www.pexels.com
∎ Remix icon - https://remixicon.com

#CodingSnow #WebDesign #slider #landingpage
----------------------------------------------
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.