How to install Swiper.js

Created

Swiper.js is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.

Swiper.js is not compatible with all platforms, it is a modern touch slider which is focused only on modern apps/platforms to bring the best experience and simplicity.

Installation

You can download the latest version of Swiper.js from the GitHub releases or use a Swiper.js CDN.

GitHub

Latest:2021-05-19 16:11:29
License:MIT License
Cloning with HTTPS URLs
git clone https://github.com/nolimits4web/swiper.git
Cloning with SSH URLs
git clone [email protected]:nolimits4web/swiper.git
Cloning with GitHub CLI
gh repo clone nolimits4web/swiper

NPM

Version:6.6.1
Publish Time:2021-05-11 23:18:35
Unpacked Size:4.74 MB
Next Version:6.0.0-alpha.18
Publish Time:2020-07-04 02:02:38
Unpacked Size:3 MB
Downloading and installing packages locally
npm i swiper
npm install swiper
yarn add swiper
Downloading and installing packages globally
npm i -g swiper
yarn global add swiper
Install Specific Version of a Package
npm install [email protected]
Bower
bower install swiper

For more information about Swiper.js see https://swiperjs.com/get-started.

Example

Code 1: - Use Swiper from CDN

<!-- If you don't want to include Swiper files in your project, you may use it from CDN. The following files are available: -->
<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>

<!-- If you use ES modules in browser, there is a CDN version for that too: -->
<script type="module">
  import Swiper from 'https://unpkg.com/swiper/swiper-bundle.esm.browser.min.js'

  const swiper = new Swiper(...)
</script>

Code 2: - Swiper HTML 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>