Background Image Slider Using Html Css & javascript

By
Coding With Nick
-
0

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

SUBSCRIBE NOW

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:

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.

Download Files

Read More –

RELATED ARTICLESMORE FROM AUTHOR

LEAVE A REPLY

Please enter your comment!
Please enter your name here