Square Theme
Horizontal slider

Slider navigation, infinite sliding, adaptive height, autoplay and other examples.

Slider navigation

Default navigation

By default Slice Square Theme navigation is positioned at sides of the slider and will automaticaly change navigation for vertical sliding.

Navigation over

Slice Square Theme allows You to position navigation elements at sides or over the slider. To change navigation position there are special classes that can be added to slider via HTML or Javascript slider options.

Dots over, arrows side

Slice Square Theme navigation classes responds for arrows and dots separately, so there is a lot of arrows and dots navigation variations. For example, arrows at sides and dots over the slider.

Infinite sliding

Never ending sliding with rewind and loop option.


Go backwards when the boundary has reached.


Creates a loop of slides for infinite sliding.

Adaptive height

Make slider adapt it's height to current slide height.

Slide spacing

Slide spacing can be set in pixels (px) or percents (%) of stage space

Slide spacing 30px
Slide spacing 25%

Stage and slides

Stage size and padding

Stage is a nominal space taken by the current slide. By default stage takes all slider space, but it's possible to set stage padding and max size.

Slide size

Slides ratio, current slide size. Stick slides or align it and leave extra space.

Stage padding and current slide size

These options can be combined for the better performance.

Mouse and touch draggable

Touch and drag to see the magic.

Live drag. See what you drag.
Free drag. Stay where you drag.

Autoplay and freeplay

Move throught all slides wisely!

Automaticaly move to next slide after some time.
Slowly move throught all slides.


Change the look, navigation, behaviour on different devices.

Fade sliding animation

You can set sliding animation, when You move directly to slide (prev/next arrow), to fade.