Hello , Today in this blog you’ll learn How to create an Background Image Slider Using Html Css & javascript . Earlier I have shared a blog on Product Landing Page Using Html Css Bootstrap and now it’s time to create a Responsive Footer HTML CSS | Bootstrap Footer.
If you are familiar with HTML CSS & JAVASCRIPT then you can easily create this Background Image Slider Using Html Css & javascript . Those People who are feeling difficult to understand this, don’t worry You can watch a full video tutorial on this Image Slider Using Html Css & javascript .
FILE INCLUDED :
- HTML File
- CSS File
- JS File
OTHER LINKS :
IMAGE CREDIT :
Full Video Tutorial of Background Image Slider
In the video, you’ve seen the Background Image Slider and I hope you’ve understood the basic codes behind creating this project.
I have provided the full source code of this program Background Image Slider . Feel free to use the following codes.
You might like this:
- Animated Login Form Using HTML & CSS
- Responsive Image Slider | With Manual Button & Auto-play
- How to Create a Drop Down Menu Using Html & Css
- How to Create a Social Media Login Form
- How create an Complete Responsive Ecommerce Website
Responsive Footer Section | Free Source Code
First of all, you need to create two files one is an HTML file and another is a CSS file, after creating these two files you can easily copy-paste the given codes in your HTML & CSS files. You can also download all source code files directly from the given Download Butt
# HTML CODE
First, create a Html file (index.html) and paste the given codes in your HTML file. This code is paste between the <body> </body>tag of your file.
<div class="slider-container">
<div class="slide active" style="background-image: url('img/1.jpg');"></div>
<div class="slide" style="background-image: url('img/2.jpg');"></div>
<div class="slide" style="background-image: url('img/3.jpg');"></div>
<div class="slide" style="background-image: url('img/4.jpg');"></div>
<div class="slide" style="background-image: url('img/5.jpg');"></div>
<div class="slide" style="background-image: url('img/6.jpg');"></div>
<button class="arrow left-arrow" id="left">
<i class="fas fa-arrow-left"></i>
</button>
<button class="arrow right-arrow" id="right">
<i class="fas fa-arrow-right"></i>
</button>
</div>
# CSS CODE
Second, create a CSS file (style.css) and paste the given codes in your CSS file.
/* coding with nick */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
*{
box-sizing: border-box;
}
body{
font-family: 'Roboto' , sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
background-position: center center;
background-size: cover;
transition: 0.4s
}
body::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.7);
z-index: -1;
}
.slider-container{
height: 70vh;
width: 70vw;
position: relative;
overflow: hidden;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.slide{
opacity: 0;
height: 100vh;
width: 100vw;
background-position: center center;
background-size: cover;
position: absolute;
top: -15vh;
left: -15vw;
transition: 0.4s ease;
z-index: 1;
}
.slide.active{
opacity: 1;
}
.arrow{
position: fixed;
background-color: transparent;
color: #fff;
padding: 20px;
font-size: 30px;
border: 2px solid orange;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.arrow:focus{
outline: 0;
}
.left-arrow{
left: calc(15vw - 65px);
}
.right-arrow{
right: calc(15vw - 65px);
}# JS CODE
Last, create a JS file (script.js) and paste the given codes in your JS file.
// coding with nick
const body = document.body
const slides = document.querySelectorAll('.slide')
const leftBtn = document.getElementById('left')
const rightBtn = document.getElementById('right')
let activeSlide = 0
rightBtn.addEventListener('click', () => {
activeSlide++
if (activeSlide > slides.length - 1) {
activeSlide = 0
}
setBgToBody()
setActiveSlides()
})
leftBtn.addEventListener('click', () => {
activeSlide--
if (activeSlide < 0 ) {
activeSlide = slides.length - 1
}
setBgToBody()
setActiveSlides()
})
setBgToBody()
function setBgToBody() {
body.style.backgroundImage = slides[activeSlide].style.backgroundImage
}
function setActiveSlides() {
slides.forEach((slide) => slide.classList.remove('active'))
slides[activeSlide].classList.add('active')
}That’s all, now you’ve successfully Create a Background Image Slider Using Html Css & javascript . If your code doesn’t work or you’ve faced any error And problem’s , please download the source code from the given download button
I Hope this blog will be helpful.
Read More –
- How To Create Responsive Image Gallery Using Html & Css
- Responsive Image Slider | With Manual Button & Auto-play – Html Css Javascript
- How create an Online Store Website Using Htm Css JS | Multi Page Website
- Create A Music Player Using Javascript | Javascript Audio Player
- Responsive Navigation Bar Design using HTML and CSS
