Canvas Swiper Slider

Canvas Slider

The Canvas Slider is the theme's built in full width or full screen slider, powered by the Swiper engine. It initializes automatically on any element that carries the swiper_wrapper class. Slides live inside a standard Swiper structure and support animated captions, background images, HTML5 video, and YouTube backgrounds.

Core markup

A Canvas Slider is a slider-element section with the swiper_wrapper class. Inside it sits .swiper.swiper-parent, then .swiper-wrapper, then one .swiper-slide per slide.

<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 data-animate="fadeInUp">A Different Canvas</h2>
						<p class="d-none d-sm-block" data-animate="fadeInUp" data-delay="200">Flexibility to the core and different in every aspect.</p>
					</div>
				</div>
				<div class="swiper-slide-bg" style="background-image: url('images/slider/1.jpg');"></div>
			</div>
			<div class="swiper-slide dark">
				<div class="container">
					<div class="slider-caption slider-caption-center">
						<h2 data-animate="fadeInUp">Beautifully Flexible</h2>
						<p class="d-none d-sm-block" data-animate="fadeInUp" data-delay="200">Looks beautiful and ultra-sharp on every device.</p>
					</div>
				</div>
				<div class="swiper-slide-bg" style="background-image: url('images/slider/2.jpg');"></div>
			</div>
		</div>
		<div class="slider-arrow-left"><i class="uil uil-angle-left-b"></i></div>
		<div class="slider-arrow-right"><i class="uil uil-angle-right-b"></i></div>
	</div>
</section>

The .swiper-slide-bg div holds the slide background image, and .slider-caption holds the text. The dark class on a slide flips its text to light colors for dark background images.

Data options

All options are set as data-* attributes on the swiper_wrapper element. These are read directly by the slider module.

Attribute	Default	Description
`data-direction`	`horizontal`	Slide axis: `horizontal` or `vertical`.
`data-speed`	`300`	Transition duration in milliseconds.
`data-autoplay`	off	Autoplay delay in milliseconds, for example `5000`. Omit to disable.
`data-autoplay-disable-on-interaction`	`true`	Set to `false` to keep autoplay running after the user swipes.
`data-hover`	`false`	`true` pauses autoplay while the pointer is over the slider.
`data-loop`	`false`	`true` loops back to the first slide continuously.
`data-start`	`1`	Starting slide number (1 based), or `random`.
`data-effect`	`slide`	Transition effect, for example `slide` or `fade`.
`data-grab`	grab on	Set to `false` to hide the grab cursor.
`data-parallax`	`false`	`true` enables Swiper parallax on layers.
`data-autoheight`	`false`	`true` adjusts slider height to the active slide.
`data-video-autoplay`	`true`	Set to `false` to stop background videos from autoplaying.

Fade example with autoplay

<section id="slider" class="slider-element dark swiper_wrapper" data-effect="fade" data-loop="true" data-speed="1000" data-autoplay="4500">
	<div class="swiper swiper-parent">
		<div class="swiper-wrapper">
			<div class="swiper-slide">...</div>
			<div class="swiper-slide">...</div>
		</div>
	</div>
</section>

Navigation, pagination and slide numbers

Add the optional control elements inside .swiper-parent. The module wires each one up only if it is present.

<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="swiper-pagination"></div>
<div class="swiper-scrollbar"><div class="swiper-scrollbar-drag"></div></div>
<div class="slide-number font-secondary">
	<div class="slide-number-current"></div><span></span><div class="slide-number-total"></div>
</div>

.slider-arrow-left and .slider-arrow-right become the previous and next buttons.
.swiper-pagination renders clickable pagination dots.
.swiper-scrollbar shows a draggable scrollbar.
.slide-number-current and .slide-number-total are filled with the live slide index and total count.

Tips

Every slide needs the .swiper-slide class, and the wrapper needs both swiper_wrapper and an inner .swiper-parent, or the slider will not initialize.
Use data-animate on caption elements to animate them in as each slide becomes active. Add data-delay in milliseconds to stagger them.
For background video slides, use a .video-wrap block with a <video> element inside the .swiper-slide. The active slide plays and inactive slides pause automatically.
Combine data-loop="true" with data-autoplay for an always-on rotating hero.

Usage

<section id="slider" class="slider-element slider-parallax swiper_wrapper min-vh-60 min-vh-md-100">
	<div class="slider-inner">

		<div class="swiper swiper-parent">
			<div class="swiper-wrapper">

				<!-- First Slide -->
				<div class="swiper-slide dark">
					<!-- Slider Content -->
					<div class="swiper-slide-bg" style="background-image: url('your-bg-image.jpg');"></div>
				</div>

				<!-- Second Slide -->
				<div class="swiper-slide dark">
					<!-- Slider Content -->
					<div class="video-wrap">
						<video id="slide-video" poster="your-video-poster.jpg" preload="auto" loop autoplay muted>
							<source src='your-video.webm' type='video/webm' />
							<source src='your-video.mp4' type='video/mp4' />
						</video>
						<div class="video-overlay" style="background-color: rgba(0,0,0,0.55);"></div>
					</div>
				</div>

				<!-- Third Slide -->
				<div class="swiper-slide">
					<!-- Slider Content -->
					<div class="swiper-slide-bg" style="background-image: url('your-bg-image.jpg'); background-position: center top;"></div>
				</div>
			</div>
			<div class="slider-arrow-left"><i class="icon-angle-left"></i></div>
			<div class="slider-arrow-right"><i class="icon-angle-right"></i></div>
		</div>

	</div>
</section>

Note: You can use the "dark" class on .swiper-slide element, to make the Caption Content & the Header Scheme(only on Transparent Header) "Dark".

Settings

Setting	Description
`data-direction`	Direction of the Slide Animation.
`data-speed`	Speed of the Slide Animation in milliseconds. Example: `500`
`data-autoplay`	Pause Time between Slide's Autoplay Transition in milliseconds. Example: `5000`
`data-loop`	Enable/Disable Slider Loop.
`data-effect`	Slide Effect.
`data-grab`	Enable/Disable Grab Cursor
`data-video-autoplay`	Enable/Disable Video Autoplay.

Extras

Setting Slider Height

The Canvas slider (.slider-element) height is controlled with utility classes on the slider section, not a JS option. Combine a viewport-height utility with the flex-height flags the dimension module understands.

<!-- Full viewport height slider -->
<section id="slider" class="slider-element swiper_wrapper min-vh-100">
    <div class="swiper-parent">
        <div class="swiper-wrapper">
            <div class="swiper-slide">...</div>
        </div>
    </div>
</section>

<!-- Fixed / content-driven height -->
<section id="slider" class="slider-element swiper_wrapper min-vh-75 h-auto">
    ...
</section>

Notes:

Use Bootstrap viewport helpers like min-vh-100, min-vh-75, min-vh-50 to set the base height.
Add h-auto (or min-vh-0) when you want the slider to size itself to its content instead of a fixed height. The sliderdimensions.js module measures the inner content and sets the height for you on large screens.
On small screens the module clears its inline heights so slides flow naturally.
For a per-breakpoint pixel height on a non-slider block, use the data-height-* attributes instead (see Responsive Absolute Heights).

Slider Pagination

The Canvas slider (built on Swiper) enables pagination dots automatically when it finds a .swiper-pagination element inside the slider, and prev/next arrows when it finds .slider-arrow-left / .slider-arrow-right.

<section id="slider" class="slider-element swiper_wrapper min-vh-75">
    <div class="swiper-parent">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
        </div>

        <!-- Pagination dots -->
        <div class="swiper-pagination"></div>

        <!-- Prev / Next arrows -->
        <div class="slider-arrow-left"><i class="bi-chevron-left"></i></div>
        <div class="slider-arrow-right"><i class="bi-chevron-right"></i></div>
    </div>
</section>

Notes:

Just adding .swiper-pagination turns on clickable pagination bullets; remove it to hide them.
Arrows are optional and independent: include either or both arrow elements.
A .swiper-scrollbar element enables a draggable scrollbar instead of / alongside dots.
Slider behaviour is configured on the .swiper_wrapper element via data-*: data-loop="true", data-autoplay="5000" (delay in ms), data-speed="300", data-effect="fade", data-direction="vertical".
To show the current/total slide numbers, add elements with classes .slide-number-current and .slide-number-total.

Initializing Canvas Swiper Slider using Custom Javascript

Canvas auto-inits .swiper_wrapper sliders. To control one yourself, add the customjs class so Canvas skips it, then build your own Swiper instance in a custom script (Swiper is bundled).

<div class="swiper_wrapper customjs" style="height:500px;">
    <div class="swiper-parent">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
        </div>
    </div>
    <div class="slider-arrow-left"><i class="icon-angle-left"></i></div>
    <div class="slider-arrow-right"><i class="icon-angle-right"></i></div>
</div>

SEMICOLON.Custom.onLoad = function () {
    new Swiper('.swiper_wrapper.customjs .swiper-parent', {
        speed: 600,
        loop: true,
        autoplay: { delay: 5000 },
        navigation: {
            prevEl: '.slider-arrow-left',
            nextEl: '.slider-arrow-right'
        }
    });
};

Note: without customjs, Canvas reads data-* attributes (like data-loop, data-autoplay, data-speed, data-effect) on .swiper_wrapper and initialises the slider for you.

Was this page helpful?