Slider Types & their Options

Slider Types and Options

Canvas ships several slider layouts built on the same swiper_wrapper engine. The layout you get depends on the classes you add to the slider-element section, while behavior is controlled by data-* attributes. This page covers the common types and how to configure them.

Full screen slider

A full screen slider fills the whole viewport height. Add min-vh-100 to the slider-element, and include-header when the slider sits directly under a transparent header so it accounts for header height.

<section id="slider" class="slider-element include-header swiper_wrapper min-vh-100" data-loop="true">
	<div class="swiper swiper-parent">
		<div class="swiper-wrapper">
			<div class="swiper-slide dark">
				<div class="container">
					<div class="slider-caption slider-caption-center">
						<h2>Full Screen</h2>
					</div>
				</div>
				<div class="swiper-slide-bg" style="background-image: url('images/slider/1.jpg');"></div>
			</div>
		</div>
	</div>
</section>

Parallax slider

Add the slider-parallax class for the theme's scroll parallax effect, where the slider drifts as the page scrolls. This is the default hero style on many one page demos.

<section id="slider" class="slider-element slider-parallax swiper_wrapper min-vh-100 include-header" data-loop="true" data-speed="1000">
	<div class="slider-inner">
		<div class="swiper swiper-parent">
			<div class="swiper-wrapper">
				<div class="swiper-slide dark">...</div>
			</div>
		</div>
	</div>
</section>

The scroll parallax uses .slider-inner, .slider-caption, .slider-arrow-left and .slider-arrow-right as the elements it moves and fades. When the slider scrolls out of view the module toggles slider-parallax-visible and slider-parallax-invisible classes for you.

Boxed slider

The boxed-slider class adds top padding so the slider is not flush with the header, giving a contained look.

<section id="slider" class="slider-element boxed-slider">
	...
</section>

Canvas slider (grid)

Adding canvas-slider (often with canvas-slider-grid) turns the slider into an image grid layout where each .swiper-slide can hold multiple nested images. Use customjs when you want to initialize it with your own settings.

<section id="slider" class="slider-element swiper_wrapper customjs canvas-slider canvas-slider-grid min-vh-60 min-vh-md-100">
	<div class="swiper swiper-parent">
		<div class="swiper-wrapper">
			<div class="swiper-slide">
				<div class="swiper-slide-bg" style="background-image: url('images/slider/1.jpg');"></div>
			</div>
		</div>
	</div>
</section>

Height options

Class	Effect
min-vh-100	Full viewport height slider.
min-vh-60	60 percent viewport height.
min-vh-0	Height driven by content, not the viewport.
h-auto	Auto height based on the tallest slide content.

You can also make height responsive, for example min-vh-60 min-vh-md-100 for a shorter slider on mobile and full height on medium and up.

Behavior options

Behavior is set with the same data-* attributes the Canvas Slider reads:

<section class="slider-element swiper_wrapper"
	data-loop="true"
	data-autoplay="5000"
	data-speed="1000"
	data-effect="fade"
	data-direction="horizontal">

• data-loop="true" for continuous looping.
• data-autoplay="5000" for a five second autoplay delay.
• data-effect="fade" for a crossfade instead of a slide.
• data-direction="vertical" for a vertical slider.

Tips

• Combine a type class (slider-parallax, boxed-slider, canvas-slider) with a height class (min-vh-100) and behavior attributes (data-loop, data-autoplay) to compose the exact slider you need.
• Use include-header only when the slider is under a transparent header, so it reserves the correct space.
• Add customjs when you plan to initialize or tweak the slider yourself instead of relying on the automatic setup.