![Coding Snow](/img/default-banner.jpg)
- 83
- 4 447 334
Coding Snow
United States
Registrace 2. 09. 2019
Hello there! Welcome to Coding Snow.
Creating beautiful and useful front-end web development projects ❄️❤️
I'm passionate about sharing my knowledge and making more creative and useful projects that will help you to do more. From our channel, you will learn Web design tutorials, Front-end UI designs, Responsive web design, Desktop and mobile-friendly web interfaces, tips, and tricks using HTML, CSS, JavaScript, JQuery, and beyond.
Let's code and create beautiful things together! ❤️
Subscribe and stay tuned.
Creating beautiful and useful front-end web development projects ❄️❤️
I'm passionate about sharing my knowledge and making more creative and useful projects that will help you to do more. From our channel, you will learn Web design tutorials, Front-end UI designs, Responsive web design, Desktop and mobile-friendly web interfaces, tips, and tricks using HTML, CSS, JavaScript, JQuery, and beyond.
Let's code and create beautiful things together! ❤️
Subscribe and stay tuned.
Responsive Image Slider Website Design | Right/Left Nav, Autoplay & Pagination - Html CSS Javascript
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 ❤️
✔️ Clear Coding
✔️ Easy to Follow
+ Like and Subscribe 🔔 for More! ❤️❄️ @CodingSnow
∎ Get This Project Source Codes - buymeacoffee.com/codingsnow/e/267439
📚 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) - www.codingsnow.com/2024/06/tutorial82.html
Hire Me 🔖
-----------------------
∎ Hire me to customize this project for your purpose - www.buymeacoffee.com/codingsnow/commissions/19517
∎ Hire me to Fix your project Bugs & Issues - www.buymeacoffee.com/codingsnow/commissions/16169
∎ Hire me to Convert your Figma, PSD, and XD Design to an HTML Website - www.buymeacoffee.com/codingsnow/commissions/16164
Support My Works ❤️❄️
--------------------------------------------
∎ Buymeacoffee - www.buymeacoffee.com/codingsnow
∎ Patreon - www.patreon.com/codingsnow
∎ Download File Setup - codingsnow.com
∎ Download All Source Codes On Patreon - www.patreon.com/posts/106406195
∎ Facebook Page - codingsnow
∎ Instagram - coding.snow
∎ Support From Paypal - paypal.me/codingsnowget
🔗External Sources
------------------------------------
∎ Image & Video Source - www.pexels.com
∎ Remix icon - remixicon.com
#CodingSnow #WebDesign #scroll #reveal
----------------------------------------------
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.
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 ❤️
✔️ Clear Coding
✔️ Easy to Follow
+ Like and Subscribe 🔔 for More! ❤️❄️ @CodingSnow
∎ Get This Project Source Codes - buymeacoffee.com/codingsnow/e/267439
📚 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) - www.codingsnow.com/2024/06/tutorial82.html
Hire Me 🔖
-----------------------
∎ Hire me to customize this project for your purpose - www.buymeacoffee.com/codingsnow/commissions/19517
∎ Hire me to Fix your project Bugs & Issues - www.buymeacoffee.com/codingsnow/commissions/16169
∎ Hire me to Convert your Figma, PSD, and XD Design to an HTML Website - www.buymeacoffee.com/codingsnow/commissions/16164
Support My Works ❤️❄️
--------------------------------------------
∎ Buymeacoffee - www.buymeacoffee.com/codingsnow
∎ Patreon - www.patreon.com/codingsnow
∎ Download File Setup - codingsnow.com
∎ Download All Source Codes On Patreon - www.patreon.com/posts/106406195
∎ Facebook Page - codingsnow
∎ Instagram - coding.snow
∎ Support From Paypal - paypal.me/codingsnowget
🔗External Sources
------------------------------------
∎ Image & Video Source - www.pexels.com
∎ Remix icon - remixicon.com
#CodingSnow #WebDesign #scroll #reveal
----------------------------------------------
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.
zhlédnutí: 3 278
Video
Magnetic Effects For Your Website Elements | On Mousemove - Html, CSS & Javascript
zhlédnutí 2,6KPřed 4 měsíci
How To Add Magnetic Effects For Your Website Elements | On Mousemove - HTML, CSS & Javascript | Cool Effect For Responsive Website In this tutorial video, you'll learn how to create magnetic effects for your website elements within just a few easy steps using HTML, CSS, and Javascript. Just include the magnetic effect Javascript code and add a "magnetic" class attribute to your HTML elements. T...
Responsive Card Slider Website | With Modals and Content Search Function 🔍 - Html, CSS & Javascript
zhlédnutí 5KPřed 6 měsíci
Responsive Modern Card Slider Website | With Card Related Modals and Content Search Function 🔍 - Html, CSS & Javascript In this project, you can learn how to design a responsive card slider website with card-related modals using HTML, CSS and Javascript. Additionally, the web page includes a content search function to open models through search results. Also, you can see web page elements revea...
Card Hover Effect | 3D Rotate Effect For Elements On Mousemove (No Plugins) - Html, CSS & Javascript
zhlédnutí 3,4KPřed 8 měsíci
Responsive Card Layout | 3D Hover Rotate Effect For HTML Elements On Mousemove (No Plugins) - Html, CSS & Javascript In this project, you can learn how to make a responsive card layout with awesome 3d effects on card HTML elements and 3d rotation effect on cards using HTML, CSS and Javascript (Without any external plugin). Hope you'll enjoy this tutorial and learn something more ❤️ ✔️ Clear Cod...
Scroll Reveal | Reveal Website Elements One-by-one On Scroll (No Plugins) - Html, CSS & Javascript
zhlédnutí 7KPřed 9 měsíci
Scroll Reveal | Reveal Responsive Website Layout Elements One by one On Scroll and Load - Html, CSS & Javascript In this video, you can learn how to animate groups of elements to reveal one by one in a responsive website layout on page scroll and load using HTML, CSS & Javascript without any external libraries or plugins. Hope you'll enjoy this amazing project and learn something more ❤️ ✔️ Cle...
Curved Drop Shadow Effect | For Responsive Card Layout - A CSS Trick - Html & CSS
zhlédnutí 2,4KPřed 10 měsíci
Curved Drop Shadow Effect | For Responsive Card Layout - A CSS Trick - Html & CSS In this video, you can learn how to add curved drop shadows for a responsive card layout simply and easily using HTML and CSS. It is a simple CSS trick. Hope you'll enjoy and learn something more from this video ❤️ ✔️ Clear Coding ✔️ Easy to Follow Like and Subscribe 🔔 for More! ❤️❄️ @CodingSnow ∎ Get This Project...
Create a Live Word Counter | Count Words, Characters, Sentence & Paragraphs - Html, CSS & Javascript
zhlédnutí 1,4KPřed 11 měsíci
Create a Responsive Word Counter | (Count Words, Characters, Sentences & Paragraphs) - Using Html, CSS & Javascript In this video, you can learn how to create a responsive word counter using HTML, CSS, and Javascript. Using this word counter you can get the total count of words, characters, sentences, and paragraphs of the text content you input to the textarea. And this is super easy to design...
See More/See Less Function For Multiple Paragraph/Text Contents On A Website - HTML CSS & Javascript
zhlédnutí 6KPřed rokem
Responsive Cards With See More/See Less Function | For Text Contents - HTML CSS & Javascript Read More More/Read Less Function For Multiple Paragraph/Text Contents On A Website - HTML, CSS & Javascript In this video, you can learn how to create a see more function for multiple Paragraph/Text contents on a webpage using HTML, CSS & Javascript. The see more function is implemented by using the te...
Awesome Cursor Click Animation For Your Website | On Mouse Click - HTML, CSS & Javascript
zhlédnutí 8KPřed rokem
Awesome Cursor Click Animation For Your Website | On Mouse Click - HTML, CSS & Javascript In this video, you can learn how to create an awesome cursor-click animation with circles and triangles for your website using HTML, CSS, and Javascript. This click animation works on multiple clicks. On every click, it will create a cursor animation clone and each clone automatically removes on a timeout ...
Responsive Horizontal Scrollable & Draggable Tab Menu | With Tab Content - Html, CSS & Javascript
zhlédnutí 39KPřed rokem
Responsive Horizontal Scrollable & Draggable Tab Navigation Menu | With Tab Content - Html, CSS & Javascript In this tutorial, you can learn how to create a responsive tab navigation menu that can be horizontally scrollable with left/right scroll buttons & draggable with the cursor using HTML, CSS and Javascript. Also, you can learn how to open each tab content by clicking each tab button in th...
Card Layout With Playable Thumbnails On Hover | With On Click Popup Modals - Html, CSS & Javascript
zhlédnutí 8KPřed rokem
Responsive Cards With Playable Thumbnails On Hover | And With On Click Popup Modals - Html CSS & Javascript In this tutorial, you will learn how to design these cards with a playable thumbnail on mouseover the thumbnail image and stop it on mouseleave. Each card's long titles are shortened with "..." using JQuery. And for each card, there is a popup modal screen to display each video in the mod...
Cool Wiggle Animation Effect On Buttons - Using Html & Css
zhlédnutí 6KPřed rokem
Cool Wiggle Animation Effect On Buttons - Using Html & Css
Analog Clock Design ⏲️ - Html, CSS & Javascript
zhlédnutí 7KPřed 2 lety
Analog Clock Design ⏲️ - Html, CSS & Javascript
Scroll Indicator Bar | With Responsive Header Navigation Menu - Html, Css & Javascript
zhlédnutí 13KPřed 2 lety
Scroll Indicator Bar | With Responsive Header Navigation Menu - Html, Css & Javascript
Digital Clock Design | With 12-hour/24-hour Format Switcher - Html, Css & Javascript
zhlédnutí 39KPřed 2 lety
Digital Clock Design | With 12-hour/24-hour Format Switcher - Html, Css & Javascript
Responsive Website Landing Page | With Full-Screen Draggable Image Slider - Html, Css & Javascript
zhlédnutí 81KPřed 2 lety
Responsive Website Landing Page | With Full-Screen Draggable Image Slider - Html, Css & Javascript
Responsive Flat Pricing Card List Design - Using HTML & CSS
zhlédnutí 4,8KPřed 2 lety
Responsive Flat Pricing Card List Design - Using HTML & CSS
Responsive Sliding Login & Signup Forms | With Show/Hide Password - Using HTML, CSS & Javascript
zhlédnutí 13KPřed 2 lety
Responsive Sliding Login & Signup Forms | With Show/Hide Password - Using HTML, CSS & Javascript
Complete Responsive Personal Portfolio Website - Using Html, CSS & Javascript
zhlédnutí 79KPřed 2 lety
Complete Responsive Personal Portfolio Website - Using Html, CSS & Javascript
How to Make Website with Scroll Reveal Effects | Reveal Elements On Scroll - HTML, CSS & Javascript
zhlédnutí 152KPřed 2 lety
How to Make Website with Scroll Reveal Effects | Reveal Elements On Scroll - HTML, CSS & Javascript
Popup Screen For a Website Using Cookies | With Blur Background - HTML, CSS & Javascript
zhlédnutí 19KPřed 3 lety
Popup Screen For a Website Using Cookies | With Blur Background - HTML, CSS & Javascript
Responsive Header Navigation Menu For A Website | With Dropdown Menus - HTML CSS Javascript & Jquery
zhlédnutí 45KPřed 3 lety
Responsive Header Navigation Menu For A Website | With Dropdown Menus - HTML CSS Javascript & Jquery
Turn Image Into an Animation | For Beginners - Using Only HTML & CSS
zhlédnutí 10KPřed 3 lety
Turn Image Into an Animation | For Beginners - Using Only HTML & CSS
How to Make a Working Pagination | With Examples - Functional With UI Cards - HTML, CSS & Jquery
zhlédnutí 57KPřed 3 lety
How to Make a Working Pagination | With Examples - Functional With UI Cards - HTML, CSS & Jquery
How to Make a Website | With Loading Effects & Scrolling Effects - Using HTML, CSS & Javascript
zhlédnutí 15KPřed 3 lety
How to Make a Website | With Loading Effects & Scrolling Effects - Using HTML, CSS & Javascript
Skeleton Loading Effect | On Cards With Images, Text & Icons - Using HTML, CSS & Javascript
zhlédnutí 10KPřed 3 lety
Skeleton Loading Effect | On Cards With Images, Text & Icons - Using HTML, CSS & Javascript
Responsive Image Slider With Next & Previous Buttons | Autoplay - Pause/Play - HTML CSS & Javascript
zhlédnutí 50KPřed 3 lety
Responsive Image Slider With Next & Previous Buttons | Autoplay - Pause/Play - HTML CSS & Javascript
Copy Text Content To Clipboard - HTML CSS & Javascript
zhlédnutí 9KPřed 3 lety
Copy Text Content To Clipboard - HTML CSS & Javascript
Responsive Website Design | With Background Video Slider - Travel Website - HTML CSS & Javascript
zhlédnutí 382KPřed 3 lety
Responsive Website Design | With Background Video Slider - Travel Website - HTML CSS & Javascript
Calendar Card UI Design | Glassmorphism - HTML, CSS & Javascript
zhlédnutí 6KPřed 3 lety
Calendar Card UI Design | Glassmorphism - HTML, CSS & Javascript
thanks
you did not even show the css and html code
THANK YOU!!!
Awesome!😍
Excellent work, sir.. A question, where to put the code for the Excel, PDF, etc. buttons... Thank you very much!!
How to find a background video according to our website, plz reply
Where can I get this menu in png?
an hour and a half still doing first 3 minutes.
where are the videos to download?
@@luccas03x Links on the description
Nice work brother ❤❤
How can I do this in react??? Sry am a beginner
I Love you.
❤❤❤
How can I get this cold please
@@MunachiEke-o9y Link in the video description.
why my slide image can go back to the start
You made me the happiest❤
Hi since i want to add more elements, would it be possible to apply the css on another div, the same we applied on body?
Wonderful video man!! Very nice💯💯
I love you!
Hello, how to make it function for error and success alert message? Using if else?
I literally had zero clue on what programming you did in JavaScript but thank you
This is what i wanted from 2 days thanks bro ❤❤
Where is the onclick event ? As I don't see any JavaScript code written??
No javascript used for these buttons
@@CodingSnow If so then where is the "onclick" event defined?
bro some part of it is not loading in responsive time what is it? Anyone tell me?
This is amazing nice one
Thank you ❤️
Is there any chance designing a full website with this slider
@@fionabruce2009 Yes
@@CodingSnow am new to this and this is the best I have seen
@@CodingSnow I will like to see how you can design this
Awesome work brother Take love ❤
Thank you brother ❤
Very superb work
Thank you ❤️
Doesnt work, idk why but ive been on it for 2 days now
where did the hamburger menu go why did it disappear at the end?
swiper not working....help🙏🙏
Great, I still remember I started learning web development after watching few of your videos. After years, CZcams notified me about your new video. ❤
It's glad to have someone who has such memories with my work. Thanks man ❤
at min 3:30 you cant see the complete @ URL......
This is legendary 🔥 I love this ❤
Thanks man ❤
Please teach instead of adding music to the video, i would appreciate it.
Gracias por su video lo hice todo y funciona perfectamente, soy viejo y con una hernia en la cabeza y sueño ser desarrollador fronted, jejejeje de Bogotá, Colombia
thank you so much bro
In a div content with display flex and width auto add the images with the size of the center frame, for example one image with the class "display", .display{width: 95vw; height: 95vh}, then the div_content{width: auto; height: 95vh; display:flex; flex-flow: row nowrap; justify-content:space-evenly; align.items: center }, the content div will grow depending on the number of images by their width of each one, then .center_frame{width: 95vw; height: 95vh; display:flex; flex-flow: row nowrap; justify-content:space-evenly; align.items: center; overflow:hidden}, this is how a manual slider looks: <div class="center_frame"> <div class="div_content"> <div class="display"> </div> <div class="display"> </div> </div> </div> let btn_menu = document.querySelectorAll(".btn_menu"); let displays = document.querySelectorAll(".display"); let mode_active = function (index) { for (let i = 0; i < displays.length; i++) { displays[i].style.transform = `translateX(${index * -100}%)`; } } for (let i = 0; i < btn_menu.length; i++) { btn_menu[i].addEventListener("click", function () { mode_active(i); }); }
Muito bom cara....obrigado
Thanks 💙
awesome tutorial
what software is this? I use vs code but cannot find the preview window
Use live viewing on vs code and split the screen for your web or chrome to view one side as you create on vs code
❤
Thank You for this sir
why would you show the link to the source code, and there is nothing to find
Thank you so much 🥰
Really amazing...i want to try all website's..
thaky you buddy
muy bueno bro
the content is amazing but music... i can't coding with this beautiful music, I use this music for sleeping hahaha... beautiful bro
Thanks