Best Vue.js Swiper Components 2021

Best Vue.js Swiper Components

In this article we want to explore the best components you can use as swiper in your web app. These are third party components that you install to give the swipe functionality which makes your app more modern.

(a). Swiper.js

Swiper component for @vuejs

Installation

There are few options on how to include/import Swiper into your project:

(a). Install from NPM

We can install Swiper from NPM

 $ npm install swiper

Import

Then import and instantiate:

  // import Swiper JS
  import Swiper from 'swiper';
  // import Swiper styles
  import 'swiper/swiper-bundle.css';

  const swiper = new Swiper(...);

The above imports only the core. You import additional modules like Pagination and Navigation like this:

  // core version + navigation, pagination modules:
  import SwiperCore, { Navigation, Pagination } from 'swiper/core';

  // configure Swiper to use modules
  SwiperCore.use([Navigation, Pagination]);

  // init Swiper:
  const swiper = new Swiper(...);

To import all modules:

  // import Swiper bundle with all modules installed
  import Swiper from 'swiper/bundle';

  // init Swiper:
  const swiper = new Swiper(...);

(2). Using CDN

To import from CDN:

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

Usage

Add layout:

<!-- Slider main container -->
<div class="swiper-container">
  <!-- Additional required wrapper -->
  <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>

If you want to Customize css:

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

Then initialize and use swiper:

const swiper = new Swiper('.swiper-container', {
  // 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',
  },
});

Demo

View demo examples here.

Download

Find more info or download the component here: here