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

    Install

    npm i flix-slider

    DownloadsWeekly Downloads

    1

    Version

    1.0.28

    License

    ISC

    Unpacked Size

    36.4 kB

    Total Files

    7

    Last publish

    Collaborators

    • a_l_e_x