Navigation
Navigation comes in 7 different arrow styles and 2 different colors - light and dark.
Navigation arrows can be placed on top of the slides or placed on the side of the slider - either by shrinking the sliders or using negative margins.
By default navigation arrows do not display unless a slider is hovered - but can be set to always be visible. On touch devices, arrows are hidden by default always and navigation happens using touch. This can also be overruled and navigation arrows displayed
on small devices.
The navigation can play automatically and pause on mouseover or touch.
Navigation arrows are handled by the Swiffy Slider script. If the script is omitted, a combination of scrollbars on desktop and touch on mobile can be used to navigate the slides.
Navigation arrows
Default navigation
Round navigation .slider-nav-round
Round navigation .slider-nav-square
Arrow navigation .slider-nav-arrow
Chevron navigation .slider-nav-chevron
Caret navigation .slider-nav-caret
Caret fill navigation .slider-nav-caretfill
Default navigation, dark .slider-nav-dark
Round navigation, dark .slider-nav-round .slider-nav-dark
Default navigation, dark, outside .slider-nav-dark .slider-nav-outside
Default navigation, round, outside .slider-nav-round .slider-nav-outside
Default navigation, dark, outside expanded .slider-nav-dark .slider-nav-outside-expand
Default navigation, round, outside expanded .slider-nav-round .slider-nav-outside-expand
Auto hide navigation arrrows when on first or last slide .slider-nav-autohide .slider-item-first-visible
No navigation buttons but with scrollbar .slider-nav-scrollbar
Navigation behavior
Nodelay navigation .slider-nav-nodelay
Navigate entire page .slider-nav-page
Navigation always visible (desktop>992px) .slider-nav-visible
Navigation always visible and also shows on mobile .slider-nav-visible .slider-nav-touch
Navigation with noloop .slider-nav-noloop
Navigation with autoplay and autopause .slider-nav-autoplay .slider-nav-autopause