Basic slider example

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 div example

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' })
Gallery slider example
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 } } ] })