How to create slide with swiper

Welcome back to the series of learning what to share and I'm Tuyen. Yesterday, I shared some knowledge about Interceptor Axios that I found out. Continuing, this series, today I will share about the libraries and languages that I have learned and used it in a project that I was involved in.

As you all know making image slides and working well using HTML and CSS to write, it's very laborious. Realizing that it takes a lot of time and effort, there have been many libraries born and supported for this, including libraries: Owl Carousel, Slider, Slick, Swiper,... I used to use it. Swiper library for one of my projects and I found that it is very effective for creating slides, the usage is also very simple, no need to install much. To install and use it we need:

Swiper slider is a library that supports image zoom function, running slider on the web is quite nice and simple.

Install:

- We can install Swiper from NPM:
$ npm install swiper
- Use Swiper from CDN:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

Basic syntax:
Add code snippet to HTML

<div class="swiper">
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>
  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
   <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

Swiper CSS styles/Size:

.swiper {
  width: 600px;
  height: 300px;
}

Finally, we need to initialize JS:

// Add Swiper library
import Swiper from 'swiper/bundle';
import 'swiper/css/bundle';
const swiper = new Swiper('.swiper', {
 // Optional parameters
  direction: 'vertical',
  loop: true,
 // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },
  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
   // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

Custom properties of Navigation:
nextEL: String
String CSS selector or HTML element will act as “next” button after clicking on it

prevEL: String
String CSS selector or HTML element will act as “prev”click on it

Pagination custom properties:
el: String
String CSS selector or HTML element with pagination and pagination types: “bullets”, “fraction”, “progressbar” or “custom”.
We can also modify the default properties of navigation or pagination by directly interfering with their common class or adding another class to reconfigure them.

//HTML
    <!-- Add generic navigation class -->
    <div class="swiper-button-prev navigation"></div>
    <div class="swiper-button-next navigation"></div>
    <!-- Add generic pagination class -->
    <div class="swiper-pagination pagination"></div>

//CSS
   .navigation {
    padding:0 20px;
    color: white;
  }
  .pagination{
    bottom:24px;
  }
  .swiper-pagination-bullet {
    height:12px;
    width: 12px;
  }
  .swiper-pagination-bullet-active {
    background-color: #0ea5e9;
  }

In addition, we can add optional Parameters depending on the purpose we need to use:

  // Let the slide slide automatically after 3s
autoplay: {
  delay: 3000
},
//Default for 2 photo slides in 1 frame and distance for 2 slides is 12px
slidesPerView: 2,
spaceBetween: 12,
//Create breakpoints at each screen for slide
breakpoints: {
  768: { slidesPerView: 3 }, // 768: will have 3 images displayed
  1024: { slidesPerView: 4 } // 1024:will have 4 images displayed
},

Link code demo:
https://codepen.io/GreencrisMessi/pen/WNywGyV
*Note: for importing an image without showing navigation or pagination buttons:

const numberOfSlides = document.querySelectorAll('.swiper-slide').length;
const swiper = new Swiper('.swiper', {
  allowSlidePrev: numberOfSlides === 1 ? false : true,
      allowSlideNext: numberOfSlides === 1 ? false : true,
  autoplay: {
        delay: 3000
      },
      slidesPerView: 1,
      spaceBetween: 12,
      centeredSlides: false,
  pagination: {
    el: '.swiper-pagination',
  },
  navigation: {
        nextEl: document.querySelector('.swiper-button-next'),
        prevEl: document.querySelector('.swiper-button-prev')
      },
      on: {
        init: function () {
          const numberOfSlides = this.slides.length;
          if (numberOfSlides &lt;= 1) {
            this.allowSlidePrev = this.allowSlideNext = false;
            this.el.querySelector('.swiper-button-prev').setAttribute('class', 'hidden');
            this.el.querySelector('.swiper-button-next').setAttribute('class', 'hidden');
          } else {
            this.el.querySelector('.swiper-button-prev').removeAttribute('hidden');
            this.el.querySelector('.swiper-button-next').removeAttribute('hidden');
          }
        }
      }
});

Link code demo:
https://codepen.io/GreencrisMessi/pen/GRGyrzj
The extension uses swiper library into Modal (Bootstrap) to create popup about image slide:
- Reference modal in Bootstrap: https://getbootstrap.com/docs/5.2/components/modal/
- Create a Simple Modal:

Link CDN:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384 MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<!-- Trigger button to open modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
 Demo
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      //In the body part we can add the slide code to see the displayed image
      <div class="modal-body">
     <div class="swiper">
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>
  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
   <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

We can add slides anywhere in the modal (header, body, footer). But I recommend that you put it in the body to make it easier to manage and control your code better.
Similar to how to add HTML, CSS, and JS code, we also write files to run.
Link code demo:
https://codepen.io/GreencrisMessi/pen/OJEzWmN
This is all the knowledge I have learned and done about Swiper in my project.
Thank you for reading up to here!
See you in the next sharing series!!!

How to create slide with swiper

Share

Share

Contact Us