Responsive banner slider with parallax effect using SwiperJS

Carousel & Slider | December 18, 2022

Today in this blog you will learn how to create responsive banner slider. There I use HTML CSS JavaScript and SwiperJS plugin for create this responsive banner slider. Earlier I have share how AJAX Form Submit Without Page Refresh With PHP.

A banner slider very important for website. There you can show important information about your website.

Video tutorial of Responsive banner slider with SwiperJS

If you went to get source code of this project, you can scroll down and get the source code.

Responsive banner slider with SwiperJS [Source Codes]

If you create this project then first of all create HTML file and copy the HTML code from the ‘HTML Code’, after that create CSS file and copy the CSS from the ‘CSS Code’, after that create JavaScript file and copy the JavaScript from the ‘JavaScript Code’, then you can view this project on your browser.

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Slider</title>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class="banner-area">
  <div class="swiper-container main-slider">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="swiper-image" data-swiper-parallax-x="35%">
          <div class="swiper-image-inner" style="background-image: url(images/pic1.jpg);">
            <div class="banner-content">
              <h2 data-swiper-parallax-duration="1500" data-swiper-parallax-opacity="0" data-swiper-parallax="-700"> Slide 1</h2>
              <p data-swiper-parallax-duration="1700" data-swiper-parallax-opacity="0" data-swiper-parallax="-1000">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
              tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="swiper-image" data-swiper-parallax-x="35%">
          <div class="swiper-image-inner" style="background-image: url(images/pic2.jpg);">
            <div class="banner-content">
              <h2 data-swiper-parallax-duration="1500" data-swiper-parallax-opacity="0" data-swiper-parallax="-700"> Slide 2</h2>
              <p data-swiper-parallax-duration="1700" data-swiper-parallax-opacity="0" data-swiper-parallax="-1000">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
              tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="swiper-image" data-swiper-parallax-x="35%">
          <div class="swiper-image-inner" style="background-image: url(images/pic3.jpg);">
            <div class="banner-content">
              <h2 data-swiper-parallax-duration="1500" data-swiper-parallax-opacity="0" data-swiper-parallax="-700"> Slide 3</h2>
              <p data-swiper-parallax-duration="1700" data-swiper-parallax-opacity="0" data-swiper-parallax="-1000">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
              tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="swiper-image" data-swiper-parallax-x="35%">
          <div class="swiper-image-inner" style="background-image: url(images/pic4.jpg);">
            <div class="banner-content">
              <h2 data-swiper-parallax-duration="1500" data-swiper-parallax-opacity="0" data-swiper-parallax="-700"> Slide 4</h2>
              <p data-swiper-parallax-duration="1700" data-swiper-parallax-opacity="0" data-swiper-parallax="-1000">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
              tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="swiper-image" data-swiper-parallax-x="35%">
          <div class="swiper-image-inner" style="background-image: url(images/pic5.jpg);">
            <div class="banner-content">
              <h2 data-swiper-parallax-duration="1500" data-swiper-parallax-opacity="0" data-swiper-parallax="-700"> Slide 5</h2>
              <p data-swiper-parallax-duration="1700" data-swiper-parallax-opacity="0" data-swiper-parallax="-1000">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
              tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="swiper-image" data-swiper-parallax-x="35%">
          <div class="swiper-image-inner" style="background-image: url(images/pic6.jpg);">
            <div class="banner-content">
              <h2 data-swiper-parallax-duration="1500" data-swiper-parallax-opacity="0" data-swiper-parallax="-700"> Slide 6</h2>
              <p data-swiper-parallax-duration="1700" data-swiper-parallax-opacity="0" data-swiper-parallax="-1000">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
              tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
            </div>
          </div>
        </div>
      </div>
      
    </div>

    <div class="swiper-button-prev swiper-button-white"></div>
    <div class="swiper-button-next swiper-button-white"></div>
  </div>

  <div class="swiper-container thumb-slider">
    <div class="swiper-wrapper" role="navigation">
      <div class="swiper-slide">
        <div class="slide-bgimg" style="background-image:url(images/pic1.jpg)">
          <span>Slide 1</span>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="slide-bgimg" style="background-image:url(images/pic2.jpg)">
          <span>Slide 2</span>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="slide-bgimg" style="background-image:url(images/pic3.jpg)">
          <span>Slide 3</span>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="slide-bgimg" style="background-image:url(images/pic4.jpg)">
          <span>Slide 4</span>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="slide-bgimg" style="background-image:url(images/pic5.jpg)">
          <span>Slide 5</span>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="slide-bgimg" style="background-image:url(images/pic6.jpg)">
          <span>Slide 6</span>
        </div>
      </div>
    </div>
  </div>  
</div>


<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</body>
</html>

CSS Code

Copy

*,*:after,*:before{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
body{
  font-family: arial;
  font-size: 16px;
  margin: 0;
  background: #000;
  color: #fff;
}

.banner-area{
  padding: 60px 0;
  background:#1dd1a1;
}
.banner-area:after,
.banner-area:before{
  content: "";
  display: table;
}
.banner-area:after{
  clear: both;
}

.swiper-container {
  width: 80%;
  height: calc(100vh - 120px);
  float:left;
  transition:opacity .6s ease, transform .3s ease;
}
.main-slider .swiper-image{
  width: 100%;
  height: 100%;
}
.swiper-image-inner {
  background-size: cover;
  background-position: center center;
  padding: 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.2);
  background-blend-mode: hue;
  
}
.banner-content{
  font-size: 24px;
  max-width: 600px;
  line-height: 1.4;
  color: #fff;
}
.banner-content h2{
  font-size: 40px;
  margin:0 0 10px;
}
.banner-content p{ margin: 0 }
.swiper-slide {
  overflow: hidden;
}
.swiper-button-prev,
.swiper-button-next{
  width:44px;
  opacity:0;
  visibility:hidden;
  transition: all 0.3s ease-out;
}
.swiper-button-prev{
  transform:translateX(50px);
}
.swiper-button-next{
  transform:translateX(-50px);
}
.swiper-container:hover .swiper-button-prev,
.swiper-container:hover .swiper-button-next{
    transform:translateX(0);
    opacity:1;
    visibility:visible;
}

.slide-bgimg{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  margin: 0;
  background-position:center;
  background-size:cover;
  background-color: rgba(0,0,0,0.6);
  background-blend-mode: hue;
  transition: all 0.5s ease-out;

  padding:10px 20px;
  color:#fff;
  display: flex;
  align-items: center;
  font-size: 20px;
  text-transform: uppercase;
}
.swiper-container.thumb-slider{
  width:20%;
  padding-left:5px;
  
}
.swiper-container.thumb-slider .swiper-slide{
  cursor:pointer;
}
.swiper-slide.swiper-slide-active .slide-bgimg{
  background-color: transparent;
}
.content{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height: 100%;
  
}

JavaScript Code

Copy

// Params
let mainSliderSelector = '.main-slider',
    thumbSliderSelector = '.thumb-slider';

// Main Slider
let mainSliderOptions = {
  loop: true,
  speed:1500,
  parallax: true,
  loopAdditionalSlides: 5,
  grabCursor: true,
  watchSlidesProgress: true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  }
};
let mainSlider = new Swiper(mainSliderSelector, mainSliderOptions);

// thumb Slider
let thumbSliderOptions = {
  loop: true,
  loopAdditionalSlides: 5,
  speed:1500,
  spaceBetween: 5,
  slidesPerView: 5,
  centeredSlides : true,
  touchRatio: 0.2,
  slideToClickedSlide: true,
  direction: 'vertical'
};
let thumbSlider = new Swiper(thumbSliderSelector, thumbSliderOptions);

mainSlider.controller.control = thumbSlider;
thumbSlider.controller.control = mainSlider;