Documentatie

Alles wat je nodig hebt om Slider.js te gebruiken.

Installatie

Voeg de CSS en JavaScript toe aan je pagina.

<link rel="stylesheet" href="/assets/css/slider.v1.css">
<script src="/assets/js/slider.v1.js"></script>
  

HTML structuur

Elke directe child van de container wordt een slide.

<div id="slider">
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</div>
  

Basis gebruik

Initialiseer de slider met een selector.

<script>
  Slider('#slider', {
    arrows: 'overlay',
    dots: 'circles'
  });
</script>
  

Complete setup

<link rel="stylesheet" href="/assets/css/slider.v1.css">
<script src="/assets/js/slider.v1.js"></script>

<div id="slider">
  <div>Slide 1</div>
  <div>Slide 2</div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    Slider('#slider');
  });
</script>
  

Opties

Configureer gedrag en uiterlijk van de slider.

Optie	Type	Beschrijving
arrows	string	overlay, split, top, bottom
dots	string	circles, dashes, bar
loop	boolean	Oneindig scrollen
snap	boolean	Snapt naar dichtstbijzijnde slide
spacing	number	Afstand tussen slides (px)
speed	number	Animatiesnelheid (ms)

Tips

Zorg dat je slider een vaste breedte heeft via CSS
Gebruik padding of spacing voor visuele ruimte tussen slides
Combineer met Bootstrap voor snelle layouts

Voor meer configuraties en voorbeelden:

Voorbeelden Gebruik via CDN