Flix-slider NPM

Demo

Usage

<!-- Reference flix-slider.css in your <head> tag to get the default styling -->
<link href="{ location of flix-slider } /dist/css/flix-slider.css" type="text/css" rel="stylesheet" />

<!-- Before the closing <body> tag add the js -->
<script src="{ location of flix-slider } /dist/js/flix-slider.js"></script>

Example markup

<div class="my-flix-slider">
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
  <div>Slide 4</div>
  <div>Slide 5</div>
  <div>Slide 6</div>
</div>

Example

Basic usage:

new FlixSlider({
    flixClass: '.my-flix-slider'
})

With available options:

new FlixSlider({
    flixClass: '.my-flix-slider'
    hoverButtons: false,
    itemsOnScreen: 4,
    itemsToMove: 4,
    sizingClass: 'container',
    pips: false,
    debug: false,
    prevBtnIconHtml: null,
    nextBtnIconHtml: null,
    dragOnDesktop: true,
    responsive: [{
        breakpoint: 1200,
        settings: {
          itemsOnScreen: 3,
          itemsToMove: 3
        }
      },
      {
        breakpoint: 992,
        settings: {
          itemsOnScreen: 2,
          itemsToMove: 2
        }
      },
      {
        breakpoint: 768,
        settings: {
          itemsOnScreen: 1,
          itemsToMove: 1
        }
      }
    ]
})

Options

Option	Type	Default	Description
hoverButtons	boolean	false	Advance slider by hovering over the prev / next buttons
itemsOnScreen	integer	4	Number of slides displayed on the screen
itemsToMove	integer	4	Number of slides to advance when click prev / next buttons
sizingClass	string	class name	Used to center align slider. If boostrap used this would be typically set to '.container'
pips	boolean	false	To show what page you are currently on
debug	boolean	false	Displays console info, touch pointer and sizing div
prevBtnIconHtml	string	element	Can pass other icons refs to use as button arrows. If Font Awesome used these could be set to ''
nextBtnIconHtml	string	element	Can pass other icons refs to use as button arrows. If Font Awesome used these could be set to ''
dragOnDesktop	boolean	true	Enables mouse drag on desktop to advance slider