How to install Swiper.js

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.
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.

Cloning a repository

You can clone a repository from GitHub.com to your local computer.
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

Install via NPM package

Run the following command to locally install the package and its dependencies with NPM.
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]
yarn add [email protected]
Bower
bower install swiper

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>

MORE FROM THE INSTALLMD