Image Slider Using HTML, CSS And JavaScript | With Modal Image Effect

Published: 06 June 2020
on channel: GeekProbin

6,656

How to create an image slider using HTML, CSS, and JavaSCript? + How to create an image modal?
This video is quite long because, in this video, I will show you how to make a full-screen image slider as well as an image modal effect. For that, we're going to use HTML, CSS, and Vanilla JavaScript.

A modal is a dialog box/popup window that is displayed on top of the current page. Here, we will have that modal effect on images. Whenever an image is clicked, it will pop-up as a full-screen background. The slider buttons will appear with the modal. Then, the next and previous buttons will allow us to change the images.
I hope you're gonna love this simple image slider with a modal effect.
You can find images for this project on my GitHub page.
👨‍💻 Source Code: https://github.com/prabinmagar/modal-...
Or,
You can go to https://www.pexels.com for free images.

🎶 Music:
Reflection Pool - JR Tundra    • Reflection Pool – JR Tundra (No Copyright ...

Reverie by Scott Buckley   / scottbuckley
Creative Commons — Attribution 3.0 Unported — CC BY 3.0
Free Download / Stream: https://bit.ly/scott-buckley-reverie
Music promoted by Audio Library    • Reverie – Scott Buckley (No Copyright Music)

Santo Rico by Twin Musicom http://www.twinmusicom.org
Creative Commons — Attribution 3.0 — CC BY 3.0
Free Download / Stream: https://bit.ly/santo-rico
Music promoted by Audio Library    • Santo Rico – Twin Musicom (No Copyright Mu...

Skyward by Scott Buckley http://www.scottbuckley.com.au
Attribution 4.0 International (CC BY 4.0)
Free Download / Stream: http://bit.ly/2SFARdU
Music promoted by Audio Library    • Skyward – Scott Buckley (No Copyright Music)

Snowfall by Scott Buckley   / scottbuckley
Creative Commons — Attribution 4.0 International — CC BY 4.0
Free Download / Stream: http://bit.ly/2C39hQR
Music promoted by Audio Library    • Snowfall – Scott Buckley (No Copyright Music)

On this page of the site you can watch the video online Image Slider Using HTML, CSS And JavaScript | With Modal Image Effect with a duration of hours minute second in good quality, which was uploaded by the user GeekProbin 06 June 2020, share the link with friends and acquaintances, this video has already been watched 6,656 times on youtube and it was liked by 98 viewers. Enjoy your viewing!

186