SwiperJS installeren

SwiperJS is te installeren m.b.v. NPM

Doe dit in de hoofdmap van je project

npm install swiper

Na het installeren koppel je de CSS in je app.css bestand, deze code importeer je erin:

@import '~swiper/swiper-bundle.css';

Hierna kun je een slider aanmaken binnen het slider.js bestand, vergeet deze niet te exporteren onderaan in het bestand en te importeren in de app.js

Voeg Swiper HTML Layout toe

Nu moet je de basis Swiper layout toevoegen

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

Naast de CSS-styles van Swiper, moeten we mogelijk enkele aangepaste stijlen toevoegen om de Swiper-size in te stellen:

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

Initialiseer Swiper

Als laatste moeten we de Swiper in JS initialiseren

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',
  },
});