Swiper

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

<style>
    .swiper-container {
        max-width: 1000px;
        max-height: 800px;
    }
</style>
<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">
            <img src="https://via.placeholder.com/1000x800/a0aec0/cbd5e0&text=img 1" alt="img 1" />
        </div>
        <div class="swiper-slide">
            <img src="https://via.placeholder.com/1000x800/a0aec0/cbd5e0&text=img 2" alt="img 2" />
        </div>
        <div class="swiper-slide">
            <img src="https://via.placeholder.com/1000x800/a0aec0/cbd5e0&text=img 3" alt="img 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>

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

<script type="module">
    // import Swiper from 'https://unpkg.com/swiper/swiper-bundle.esm.browser.min.js'
    // const swiper = new Swiper('.swiper-container', {
    //   // Optional parameters
    //   direction: 'horizontal',
    //   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',
    //   // },
    // });
</script>