Tiny-slider Demos

responsive

tinySlider({
  container: document.querySelector('.responsive'),
  responsive: {
    500: 2,
    800: 3,
  }
}).init();
    

fixed width

tinySlider({
  container: document.querySelector('.fixed-width'),
  fixedWidth: 200,
  maxContainerWidth: 900,
  loop: false
}).init();
    

Customize

• 

  Lorem ipsum dolor sit amet,

• 

  Blanditiis sapiente tempora corrupti incidunt

• 

  At possimus dolorum eligendi repellat

• 

  Cumque facilis amet eos nulla

• 

  Sint ad, praesentium est delectus

• 

  Neque accusamus inventore rerum aspernatur

• 

  Quis deserunt quo sequi qui

• 

  Laborum officiis, magnam, eos possimus

tinySlider({
  container: document.querySelector('.customize'),
  items: 3,
  controlsContainer: document.querySelector('.slider-controls'),
  navContainer: document.querySelector('.thumbnails'),
  lazyload: true
}).init();
    

non loop

tinySlider({
  container: document.querySelector('.non-loop'),
  items: 3,
  loop: false
}).init();
    

slide by page

tinySlider({
  container: document.querySelector('.slide-by-page'),
  items: 3,
  slideByPage: true
}).init();
    

autoplay

tinySlider({
  container: document.querySelector('.autoplay'),
  items: 3,
  autoplay: true,
  speed: 300,
  autoplayTimeout: 3000,
  autoplayText: ['▶', '❚❚']
}).init();
    

arrow keys

tinySlider({
  container: document.querySelector('.arrow-keys'),
  items: 3,
  arrowKeys: true
}).init();