Swiper

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

Install from yarn

We can install Swiper from yarn

yarn add swiper

import swiper in component or file

import Swiper from 'swiper';
import 'swiper/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 previewImages" bind:this={swiperContainer} dir="ltr">
    

        

            
        
        

            
        
        

            
        
    
</div>

JavaScript

let swiperContainer: HTMLDivElement | null = null;
onMount(() => {
    if (swiperContainer) {
        new Swiper(swiperContainer, {
            modules: [Navigation, Pagination, Autoplay],
            loop: true,
            pagination: {
                el: '.swiper-pagination',
                type: 'fraction'
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev'
            },
            autoplay: {
                delay: 2500,
                disableOnInteraction: false
            }
        });
    }
});