Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
Slide 11
Slide 12
Slide 13
Slide 14
new FlixSlider({
flixClass: '.my-flix-slider'
})
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
Slide 11
Slide 12
Slide 13
Slide 14
new FlixSlider({
flixClass: '.my-flix-slider-sizing',
sizingClass: 'flix-slider-sizer'
})
new FlixSlider({
flixClass: '.my-flix-slider-img'
})
Hover buttons example - hoverButtons
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
Slide 11
Slide 12
Slide 13
Slide 14
new FlixSlider({
flixClass: '.my-flix-slider-hoverButtons',
hoverButtons: true
})
Items to move example - itemsToMove
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
new FlixSlider({
flixClass: '.my-flix-slider-itemsToMove',
itemsToMove: 1
})
Items on screen example - itemsOnScreen
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
new FlixSlider({
flixClass: '.my-flix-slider-itemsOnScreen',
itemsOnScreen: 2,
itemsToMove: 2
})
Disable drag on desktop - dragOnDesktop
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
new FlixSlider({
flixClass: '.my-flix-slider-dragOnDesktop',
dragOnDesktop: false
})
Show the slider pips - pips
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
new FlixSlider({
flixClass: '.my-flix-slider-pips',
pips: true
})
Responsive example - responsive
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
Slide 11
Slide 12
Slide 13
Slide 14
new FlixSlider({
flixClass: '.my-flix-slider-responsive',
responsive: [{
breakpoint: 1200,
settings: {
itemsOnScreen: 3,
itemsToMove: 3
}
},
{
breakpoint: 992,
settings: {
itemsOnScreen: 2,
itemsToMove: 2
}
},
{
breakpoint: 768,
settings: {
itemsOnScreen: 1,
itemsToMove: 1
}
}
]
})