Responsive Parallax 3D slider using HTML CSS and jQuery With Swiper.js

Carousel & Slider | November 19, 2020

This blog make for jQuery slider tutorial. You can learn how to create 3D slider, parallax slider and cube slider. There we use swiper.js plugin for slide show. This plugin very useful for website.

Responsive Parallax Slider Touch Mobile | 3D slider using HTML CSS jQuery With Swiper js

This video make for jQuery slider tutorial. You can learn how to create 3D slider, parallax slider, cube slider. There we use swiper.js plugin for slide show.

Responsive Parallax 3D slider using HTML CSS and jQuery With Swiper.js [Source Code]

Use our source code to you can create Parallax Slider

Swiper.js plugin CSS and JS

Image use from unsplash

You can also download this source code through the given link. Click here to download source code

HTML Code

Copy

<!DOCTYPE html>
<html>
<head>
<title>Slider</title>
<link rel="stylesheet" type="text/css" href="css/swiper.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" style="background-image:url(images/banner1.png)"></div>
      <div class="swiper-slide" style="background-image:url(images/banner2.png)"></div>
      <div class="swiper-slide" style="background-image:url(images/banner1.png)"></div>
      <div class="swiper-slide" style="background-image:url(images/banner2.png)"></div>
      <div class="swiper-slide" style="background-image:url(images/banner1.png)"></div>
      <div class="swiper-slide" style="background-image:url(images/banner2.png)"></div>
      <div class="swiper-slide" style="background-image:url(images/banner1.png)"></div>
      <div class="swiper-slide" style="background-image:url(images/banner2.png)"></div>
      <div class="swiper-slide" style="background-image:url(images/banner1.png)"></div>
      <div class="swiper-slide" style="background-image:url(images/banner2.png)"></div>
    </div>
    <div class="swiper-pagination"></div>
</div>


  <!-- <div class="swiper-container">
    <div class="parallax-bg" style="background-image:url(images/parallax2.jpg)" data-swiper-parallax="-23%"></div>
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="title" data-swiper-parallax="-100">Slide 1</div>
        <div class="subtitle" data-swiper-parallax="-500">Subtitle</div>
        <div class="text" data-swiper-parallax="-2000">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.</p>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="title" data-swiper-parallax="-100" data-swiper-parallax-opacity="0">Slide 2</div>
        <div class="subtitle" data-swiper-parallax="-500">Subtitle</div>
        <div class="text" data-swiper-parallax="-2000">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.</p>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="title" data-swiper-parallax="-300">Slide 3</div>
        <div class="subtitle" data-swiper-parallax="-500">Subtitle</div>
        <div class="text" data-swiper-parallax="-2000">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.</p>
        </div>
      </div>
    </div>

    <div class="swiper-pagination swiper-pagination-white"></div>

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

<!-- <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" style="background-image:url(images/parallax2.jpg)"></div>
      <div class="swiper-slide" style="background-image:url(images/parallax2.jpg)"></div>
      <div class="swiper-slide" style="background-image:url(images/parallax2.jpg)"></div>
      <div class="swiper-slide" style="background-image:url(images/parallax2.jpg)"></div>
      <div class="swiper-slide" style="background-image:url(images/parallax2.jpg)"></div>
    </div>
    
    <div class="swiper-pagination"></div>
</div> -->

<script type="text/javascript" src="js/swiper.js"></script>
</body>
</html>

CSS Code

Copy

body {
  background: #fff;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color:#000;
  margin: 0;
  padding: 0;
}
.swiper-container {
  width: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
}
.swiper-slide {
  background-position: center;
  background-size: cover;
  width: 300px;
  height: 300px;
}

/*html, body {
  position: relative;
  height: 100%;
}
body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color:#000;
  margin: 0;
  padding: 0;
}
.swiper-container {
  width: 100%;
  height: 100%;
  background: #000;
}
.swiper-slide {
  font-size: 18px;
  color:#fff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 40px 60px;
}
.parallax-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 130%;
  height: 100%;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center;
}
.swiper-slide .title {
  font-size: 41px;
  font-weight: 300;
}
.swiper-slide .subtitle {
  font-size: 21px;
}
.swiper-slide .text {
  font-size: 14px;
  max-width: 400px;
  line-height: 1.3;
}*/

 /*html, body {
      position: relative;
      height: 100%;
    }
    body {
      background: #fff;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      width: 300px;
      height: 300px;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -150px;
      margin-top: -150px;
    }
    .swiper-slide {
      background-position: center;
      background-size: cover;
    }*/

JavaScript Code

Copy

var swiper = new Swiper('.swiper-container', {
      effect: 'coverflow',
      grabCursor: true,
      //centeredSlides: true,
      slidesPerView: 'auto',
      coverflowEffect: {
        rotate: 10,
        stretch: 50,
        depth: 200,
        modifier: 1,
        slideShadows : true,
      },
      pagination: {
        el: '.swiper-pagination',
      },
    });

    /*var swiper = new Swiper('.swiper-container', {
      speed: 1000,
      parallax: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });*/

    /*var swiper = new Swiper('.swiper-container', {
      effect: 'cube',
      grabCursor: true,
      cubeEffect: {
        shadow: true,
        slideShadows: true,
        shadowOffset: 20,
        shadowScale: 0.94,
      },
      pagination: {
        el: '.swiper-pagination',
      },
    });*/

Responsive Parallax 3D slider using HTML CSS and jQuery With Swiper.js

Responsive Parallax Slider Touch Mobile | 3D slider using HTML CSS jQuery With Swiper js

Responsive Parallax 3D slider using HTML CSS and jQuery With Swiper.js [Source Code]

Build a Stop-Watch Web App Using JavaScript

Build Loan EMI Calculator DIY Finance Tool using JavaScript

Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery