❤
npm
Sign UpSign In

flix-slider

1.0.28 • Public • Published

Demo

https://flix-slider.a-l-e-x.dev/

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

Dependencies

jQuery 1.12 +

License

Free to use

If you want to thank me I accept donations of life giving coffee!!!

/flix-slider/

    Package Sidebar

    Install

    npm i flix-slider

    Weekly Downloads

    3

    Version

    1.0.28

    License

    ISC

    Unpacked Size

    36.4 kB

    Total Files

    7

    Last publish

    Collaborators

    • a_l_e_x
    Try on RunKit
    Report malware