Swiper

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

Install from NPM

We can install Swiper from NPM

npm install swiper

Add the swiper css file link.

<link rel="stylesheet" href="assets/libs/swiper/swiper-bundle.min.css">

Add the js file on the page you need to use.

<script src="assets/libs/swiper/swiper-bundle.min.js"></script>

Below the example how to use the package and make it working swiper on any page.

HTML

<div class="swiper swiper-reviews">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            ...
        </div>
        <div class="swiper-slide">
            ...
        </div>
        <div class="swiper-slide">
            ...
        </div>
        <div class="swiper-slide">
            ...
        </div>
    </div>
    <div class="swiper-pagination"></div>
</div>
<script src="assets/libs/swiper/swiper-bundle.min.js"></script>

JavaScript

var productMain = new Swiper(".swiper-reviews", {
    slidesPerView: 1,
    spaceBetween: 10,
    direction: 'horizontal',
    autoHeight: true,
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
});