Helper Classes

Slider Helper Classes

Canvas provides a set of utility classes that shape how a slider looks and behaves. Combine them on the slider-element section or on the caption and control elements inside it. Every class below exists in the theme stylesheet and demo markup.

Structural classes

Class	Where	Purpose
slider-element	section	Marks the element as a Canvas slider container.
swiper_wrapper	section	Triggers the Swiper based Canvas Slider init.
slider-parallax	section	Adds the scroll parallax hero effect.
slider-inner	inner div	Wrapper the parallax logic moves and sizes.
boxed-slider	section	Adds top padding for a contained slider.
canvas-slider	section	Switches to the image grid slider layout.
include-header	section	Reserves header height under a transparent header.
customjs	section	Skips auto init so you can initialize it yourself.

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

Height helpers

Control the slider height with viewport utilities on the slider-element.

• min-vh-100 for a full screen slider.
• min-vh-60 for a shorter hero.
• min-vh-0 to let content decide the height.
• h-auto for auto height based on the tallest slide.

These accept breakpoint variants, for example min-vh-60 min-vh-md-100 for a shorter slider on small screens and full height from medium up.

Caption classes

Captions use .slider-caption with alignment and background modifiers.

Class	Effect
slider-caption	Base caption block.
slider-caption-center	Center aligns the caption.
slider-caption-right	Right aligns the caption.
slider-caption-top-left	Positions the caption top left.
slider-caption-top-right	Positions the caption top right.
slider-caption-bottom-right	Positions the caption bottom right.
slider-caption-bg	Adds a dark background panel behind the caption.
slider-caption-bg-light	Light variant of the caption background panel.

<div class="container">
	<div class="slider-caption slider-caption-center">
		<h2 data-animate="fadeInUp">Centered Caption</h2>
		<p data-animate="fadeInUp" data-delay="200">With a staggered animation.</p>
	</div>
</div>

Control classes

Add these inside .swiper-parent to enable controls. The slider wires up only the ones that exist.

Class	Purpose
slider-arrow-left	Previous arrow button.
slider-arrow-right	Next arrow button.
slider-arrow-top-sm	Nudges arrows toward the top on small screens.
slider-arrow-bottom-sm	Nudges arrows toward the bottom on small screens.
swiper-pagination	Clickable pagination dots.
swiper-scrollbar	Draggable scrollbar track.
slide-number-current	Filled with the active slide number.
slide-number-total	Filled with the total slide count.

<div class="slider-arrow-left"><i class="uil uil-angle-left-b"></i><span>Prev</span></div>
<div class="slider-arrow-right"><span>Next</span> <i class="uil uil-angle-right-b"></i></div>
<div class="slide-number font-secondary">
	<div class="slide-number-current"></div><span></span><div class="slide-number-total op-05"></div>
</div>

Parallax state classes

When slider-parallax is active, the theme toggles these classes as the slider enters and leaves the viewport, which you can hook into with your own CSS.

• slider-parallax-visible when the slider is in view.
• slider-parallax-invisible when it has scrolled out of view.

Tips

• The theme only activates a control if its element is present, so add just the arrows, pagination, scrollbar, or slide numbers you actually want.
• Pair a caption position class with slider-caption-bg when a busy background image makes plain text hard to read.
• Use dark on a .swiper-slide to switch its caption and controls to light colors over dark images.
• Add customjs when you want full manual control over initialization instead of the automatic setup.