Demo
https://flix-slider.a-l-e-x.dev/
Usage
<!-- Reference flix-slider.css in your <head> tag to get the default styling -->
<!-- Before the closing <body> tag add the js -->
Example markup
Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6
Example
Basic usage:
flixClass: '.my-flix-slider'
With available options:
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!!!