flix-slider
v1.0.28
Published
A flix style carousel
Downloads
70
Maintainers
a_l_e_xReadme
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!!!