3D Responsive Touch Slider Using HTML CSS and Swiper.js | Cube Slider





Drag the cube slider to watch the effect:




If you copy paste the code, add your images, or you won't be able to see images in the slider.


In this tutorial, we will learn how to use combination of advanced CSS, HTML, and Swiper.js to create magnificent Cube slider


There are many benefits for the cube slider, you can add product images and price and place it on your website, use it as image gallery and many more!


This Cube slider is fully responsive for phones and works on most of devices, but may not work for some devices, try to open this in full page:


Click here (phone users)




Open in code editor >>


Let's dive into the deep areas of CSS and create this cool image cube slider.


This lesson include:


  • HTML Instructions
  • CSS Instructions
  • Swiper.js Instructions

We will add comments with grey color inside the example codes and the code editor, read them to understand the code.





Part 1


Add Swiper.js scripts



Go to swiper js website :


Click on get started:



swiper.js



In the get started page, copy paste the next script:


swiper.js


Paste the script in the HTML page meta tag area (in the next part we will talk about it)






Part 2


Add HTML



Create new HTML page and copy paste the code below, if you don't know how, check out our

HTML Editors tutorial:



Code Example:

           <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
    <style>
    </style>
</head>
<body>
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="image-1">
      <img src="../img/jack1.jpg">
      </div>

      <!-- change this to control the content -->
      <div class="content">
       <h2>Your Image<br><span>Or product will be here</span></h2>
    </div>
   </div>
   <div class="swiper-slide">

   <!-- the image source, don't add dots if your image is
       in same folder of the web page code, examle: (img/jack2.jpg) -->
      <div class="image-1">
      <img src="../img/jack4.jpg">
      </div>

      <!-- change this to control the content -->
      <div class="content">
      <h2>Your Image<br><span>Or product will be here</span></h2>
    </div>
   </div>
   <div class="swiper-slide">

   <!-- the image source, don't add dots if your image is
       in same folder of the web page code, examle: (img/jack2.jpg) -->
      <div class="image-1">
      <img src="../img/jack3.jpg">
      </div>

      <!-- change this to control the content -->
      <div class="content">
      <h2>Your Image<br><span>Or product will be here</span></h2>
    </div>
   </div>
   <div class="swiper-slide">

       <!-- the image source, don't add dots if your image is
       in same folder of the web page code, examle: (img/jack2.jpg) -->
      <div class="image-1">
      <img src="../img/jack2.jpg">
      </div>

       <!-- change this to control the content -->
      <div class="content">
      <h2>Your Image<br><span>Or product will be here</span></h2>
    </div>
   </div>
   <div class="swiper-slide">

   <!-- the image source, don't add dots if your image is
       in same folder of the web page code, examle: (img/jack2.jpg) -->
      <div class="image-1">
      <img src="../img/jack1.jpg">
      </div>
      <div class="content">
      <h2>Your Image<br><span>Or product will be here</span></h2>
    </div>
   </div>
  </div>

  <!-- the script code -->
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
<script type="text/javascript">
 var swiper = new Swiper('.swiper-container', {
      effect: 'cube',
      grabCursor: true,
      cubeEffect: {
        shadow: true,
        slideShadows: true,
        shadowOffset: 20,
        shadowScale: 0.94,
      }
    });
</script>

</body>
</html> 
  
Try yourself >>





Part 3


Add CSS

Inside the style tags that we left empty in part 2, add the next CSS code lines:


Code Example:

         <style>

     *{
       margin: 0;
       padding: 0;
      }

      /* the main background color and setting of the entire page */
      body
      {
      background: #C9C9C9; 
      min-height: 100vh;
      }

      /* the size and position of the container that holds
       the image and text of the cube slider */
     .swiper-container 
      {
      width: 300px;
      height: 380px;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -150px;
      margin-top: -150px;
      }

     .swiper-slide
      {
      background-position: center;
      background-size: cover;
      background: #f2f2f2;
      }

      /* this controls the image container where you insert your 
      images to the slider, and change their size so they fit into the slider */
      .swiper-container .swiper-slide .image-1
      {
      position: absolute;
      width: 300px;
      height: 300px;
      }

      /* control the image itself */
      .swiper-container .swiper-slide .image-1 img
      {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      }

      /* control the text and content you insert to the slider */
      .swiper-container .swiper-slide .content
      {
      position: absolute;
      bottom: 0;
      height: 80px;
      width: 100%;
      background: #fff;
      text-align:center;
      display: flex;
      justify-content: center;
      align-items: center;
      }

      /* control the headings inside the slider */
      .swiper-container .swiper-slide .content h2
      {
      font-size: 20px;
      }

      /* control the blue text inside the slider */
      .swiper-container .swiper-slide .content h2 span
      {
      font-size: 16px;
      color: blue;
      }


</style> 
  

Try yourself >>


Enjoy!







Learn how to create 3D Responsive Touch Cube Slider with HTML CSS and Swiper.js, this tutorial will guide you with code examples

Navigation