Gallery Slider using Master Slider

Data Attribute Value Description
data-list-slider
  • basic
  • fade
  • mask
  • wave
  • flow
  • stack
  • scale
  • focus
  • parallaxMask
  • partialWave
  • fadeBasic
  • fadeFlow
View demo here
Trigger the slider, and choose the transition effects.
data-arrow
  • true (default)
  • false
Show / hide arrow
data-dots
  • true (default)
  • false
Show / hide arrow
data-autoplay
  • true
  • false (default)
Enable / disable autoplay





Carousel Widget

Data Attribute Value Description
data-carousel-widget Number to show how many items per view Trigger the slider, and show how many items per view carousel.

Responsive window width breakpoint :
  • > 1183px : current number input
  • <= 1183px : 3 if more than current number input
  • <= 751px : 2 if more than current number input
  • <= 527px : 1 if more than current number input
data-arrow
  • true
  • false (default)
Show / hide arrow
data-autoplay
  • true
  • false (default)
Enable / disable autoplay
data-dots
  • true (default)
  • false
Show / hide dots control
data-responsive
  • true (default)
  • false
Enable / Disable Responsive (will stay with the current number input)
data-nav
  • null (default)
  • target ID or Class
Set the slider to be the navigation of other slider (Class or ID Name)
data-focus
  • false (default)
  • true
Enable focus on selected element (click)
data-adaptive-height
  • true (default)
  • false
Change height depend on content

Autoplay Without Dots & Arrow

Manual Play With Dots

Manual Play With Dots & Arrow

Responsive item number carousel



Using data-nav & data-focus