Conntect Swiper.js In the required php file (your template index.php or in the php layout file of your extension). As a rule, the output layouts of modules and plugins are located in the tmpl folder of the module or plugin. This can be, for example, the path modules/mod_articles/tmpl or plugins/content/wtcontentimagegallery/tmpl.

<?php
use Joomla\CMS\Factory; // At the begininng of the file

$wa = Factory::getApplication()->getDocument()->getWebAssetManager();
$wa->useScript('swiper-bundle')->useStyle('swiper-bundle'); // Local file. 
$wa->usePreset('swiper-bundle-remote'); // From CDN - get the latest version

This way, Swiper JS and CSS files will be connected to the page.

Add Swiper HTML Layout

Now, we need to add basic Swiper layout to our app:

<!-- Slider main container -->
<div class="swiper">
  <!-- 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>

Swiper CSS Styles/Size

We may need to add some custom styles to set Swiper size:

.swiper {
  width: 600px;
  height: 300px;
}

Initialize Swiper

Finally, we need to initialize Swiper in JS:

const swiper = new Swiper('.swiper', {
  // Optional parameters
  direction: 'vertical',
  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',
  },
});

I recommend to wrap Swiper initialization to DOMContentLoaded

document.addEventListener('DOMContentLoaded', () => {
  const swiper = new Swiper('.swiper', {
    // Optional parameters
    direction: 'vertical',
    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',
    },
  });
});