Swiper Full HTML Layout

<!-- 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>

Files

Swiper package contains different sets of CSS, Less and SCSS styles. All of them you can see in official documentation. WT JSwiper web asset for Joomla provide only bandle package. 

swiper-bundle.min.css

All Swiper styles including all modules styles (like Navigation, Pagination, etc.). Located in media/plg_system_wtjswiper/css. Minified.

swiper-bundle.min.js

All Swiper modules in one file. Located in media/plg_system_wtjswiper/js. Minified.

Initialize Swiper

Now, when we have Swiper's HTML, we need to initialize it using the following function:

new Swiper(swiperContainer, parameters)- initialize swiper with options

• swiperContainer - HTMLElement or string (with CSS Selector) of swiper container HTML element. Required.
• parameters - object - object with Swiper parameters. Optional.
• Method returns initialized Swiper instance

For example:

const swiper = new Swiper('.swiper', {
  speed: 400,
  spaceBetween: 100,
});

After you initialize Swiper it is possible to access to Swiper's instance on its HTMLElement. It is swiper property of Swiper's HTML container element:

const swiper = document.querySelector('.swiper').swiper;

// Now you can use all slider methods like
swiper.slideNext();

See also