Coding Snow
Coding Snow
  • 83
  • 4 447 334
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.
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

Komentáře

  • @justplay-y6t
    @justplay-y6t Před 4 dny

    thanks

  • @bigboy-lp8xv
    @bigboy-lp8xv Před 4 dny

    you did not even show the css and html code

  • @insight1239
    @insight1239 Před 5 dny

    THANK YOU!!!

  • @amjadbhutto7925
    @amjadbhutto7925 Před 9 dny

    Awesome!😍

  • @javierramirezalves2320

    Excellent work, sir.. A question, where to put the code for the Excel, PDF, etc. buttons... Thank you very much!!

  • @momnavideos6269
    @momnavideos6269 Před 20 dny

    How to find a background video according to our website, plz reply

  • @neivacarvalho6686
    @neivacarvalho6686 Před 24 dny

    Where can I get this menu in png?

  • @shanecarmen8144
    @shanecarmen8144 Před měsícem

    an hour and a half still doing first 3 minutes.

  • @luccas03x
    @luccas03x Před měsícem

    where are the videos to download?

    • @CodingSnow
      @CodingSnow Před měsícem

      @@luccas03x Links on the description

  • @dilukshathineth2451
    @dilukshathineth2451 Před měsícem

    Nice work brother ❤❤

  • @aiml_44_sourikpoddar49
    @aiml_44_sourikpoddar49 Před měsícem

    How can I do this in react??? Sry am a beginner

  • @hlopes586
    @hlopes586 Před měsícem

    I Love you.

  • @user-ik8mt8xg6i
    @user-ik8mt8xg6i Před měsícem

    ❤❤❤

  • @MunachiEke-o9y
    @MunachiEke-o9y Před měsícem

    How can I get this cold please

    • @CodingSnow
      @CodingSnow Před měsícem

      @@MunachiEke-o9y Link in the video description.

  • @ddingunzakhin3848
    @ddingunzakhin3848 Před měsícem

    why my slide image can go back to the start

  • @AlvanNzere
    @AlvanNzere Před měsícem

    You made me the happiest❤

  • @Sasukeuchiha-pz1ku
    @Sasukeuchiha-pz1ku Před měsícem

    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?

  • @mukitisyingi7625
    @mukitisyingi7625 Před měsícem

    Wonderful video man!! Very nice💯💯

  • @emagirl33
    @emagirl33 Před měsícem

    I love you!

  • @amirunnaim9805
    @amirunnaim9805 Před měsícem

    Hello, how to make it function for error and success alert message? Using if else?

  • @ShinRyuuji
    @ShinRyuuji Před měsícem

    I literally had zero clue on what programming you did in JavaScript but thank you

  • @Thorfin6
    @Thorfin6 Před měsícem

    This is what i wanted from 2 days thanks bro ❤❤

  • @colindante5164
    @colindante5164 Před měsícem

    Where is the onclick event ? As I don't see any JavaScript code written??

    • @CodingSnow
      @CodingSnow Před měsícem

      No javascript used for these buttons

    • @colindante5164
      @colindante5164 Před měsícem

      @@CodingSnow If so then where is the "onclick" event defined?

  • @swalih__5561
    @swalih__5561 Před měsícem

    bro some part of it is not loading in responsive time what is it? Anyone tell me?

  • @fionabruce2009
    @fionabruce2009 Před 2 měsíci

    This is amazing nice one

    • @CodingSnow
      @CodingSnow Před 2 měsíci

      Thank you ❤️

    • @fionabruce2009
      @fionabruce2009 Před 2 měsíci

      Is there any chance designing a full website with this slider

    • @CodingSnow
      @CodingSnow Před 2 měsíci

      @@fionabruce2009 Yes

    • @fionabruce2009
      @fionabruce2009 Před 2 měsíci

      @@CodingSnow am new to this and this is the best I have seen

    • @fionabruce2009
      @fionabruce2009 Před 2 měsíci

      @@CodingSnow I will like to see how you can design this

  • @tahmidahmed-yt
    @tahmidahmed-yt Před 2 měsíci

    Awesome work brother Take love ❤

  • @rameshgalaxy
    @rameshgalaxy Před 2 měsíci

    Very superb work

  • @user-bj5gm1pt9e
    @user-bj5gm1pt9e Před 2 měsíci

    Doesnt work, idk why but ive been on it for 2 days now

  • @romilizada6699
    @romilizada6699 Před 2 měsíci

    where did the hamburger menu go why did it disappear at the end?

  • @infinitegamer4284
    @infinitegamer4284 Před 2 měsíci

    swiper not working....help🙏🙏

  • @deo_kumar
    @deo_kumar Před 2 měsíci

    Great, I still remember I started learning web development after watching few of your videos. After years, CZcams notified me about your new video. ❤

    • @CodingSnow
      @CodingSnow Před 2 měsíci

      It's glad to have someone who has such memories with my work. Thanks man ❤

  • @kongiponkikongiponki566
    @kongiponkikongiponki566 Před 2 měsíci

    at min 3:30 you cant see the complete @ URL......

  • @samuelk1623
    @samuelk1623 Před 2 měsíci

    This is legendary 🔥 I love this ❤

  • @zoro_065
    @zoro_065 Před 2 měsíci

    Please teach instead of adding music to the video, i would appreciate it.

  • @raulhernanromeroherrera2547

    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

  • @siciid5930
    @siciid5930 Před 2 měsíci

    thank you so much bro

  • @Mindy2812
    @Mindy2812 Před 2 měsíci

    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); }); }

  • @jeancarlomoraes8644
    @jeancarlomoraes8644 Před 2 měsíci

    Muito bom cara....obrigado

  • @pxycknomdictator4483
    @pxycknomdictator4483 Před 2 měsíci

    Thanks 💙

  • @rohitgarg3942
    @rohitgarg3942 Před 2 měsíci

    awesome tutorial

  • @TheBrandMethod-db3hk
    @TheBrandMethod-db3hk Před 3 měsíci

    what software is this? I use vs code but cannot find the preview window

    • @mwambakayula3229
      @mwambakayula3229 Před 5 dny

      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

  • @rahulsaw2249
    @rahulsaw2249 Před 3 měsíci

  • @codewitharjav
    @codewitharjav Před 3 měsíci

    Thank You for this sir

  • @kikky1
    @kikky1 Před 3 měsíci

    why would you show the link to the source code, and there is nothing to find

  • @CodeWithMaahzaib1
    @CodeWithMaahzaib1 Před 3 měsíci

    Thank you so much 🥰

  • @twinkle0828
    @twinkle0828 Před 3 měsíci

    Really amazing...i want to try all website's..

  • @abhayvyas3588
    @abhayvyas3588 Před 3 měsíci

    thaky you buddy

  • @user-tm1hk5mv2x
    @user-tm1hk5mv2x Před 3 měsíci

    muy bueno bro

  • @destinogmg6071
    @destinogmg6071 Před 3 měsíci

    the content is amazing but music... i can't coding with this beautiful music, I use this music for sleeping hahaha... beautiful bro

  • @Zloy_Zlodey
    @Zloy_Zlodey Před 3 měsíci

    Thanks