Canvas Swiper Slider

Usage:

Here is the HTML Code for the Canvas Swiper Slider:

Code Example

<section id="slider" class="slider-parallax swiper_wrapper full-screen clearfix">
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<!--First Slide-->
			<div class="swiper-slide">
			<!-- Any HTML content of the first slide goes here -->
			</div>

			<!--Second Slide-->
			<div class="swiper-slide">
			<!-- Any HTML content of the second slide goes here -->
			</div>

			<!--Third Slide-->
			<div class="swiper-slide">
			<!-- Any HTML content of the third slide goes here -->
			</div>
			<!--Etc..-->
		</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.

Option(s): horizontal, vertical
data-speed

Speed of the Slide Animation in milliseconds.

Ex: 500
data-autoplay

Pause Time between Slide's Autoplay Transition in milliseconds.

Ex: 5000
data-loop

Enable/Disable Slider Loop.

Option(s): true, false
data-effect

Slide Effect.

Option(s): slide, fade, cube, coverflow, flip
data-grab

Enable/Disable Grab Cursor

Option(s): true, false
data-video-autoplay

Enable/Disable Video Autoplay.

Option(s): true, false

Setting Slider Height

<div id="slider" class="slider-parallax swiper_wrapper clearfix" style="height: 400px;">
	...
</div>

Slider Pagination

To disable the Pagination, Slider Next/Prev Arrows, simply remove the related HTML Codes.

<section id="slider" class="slider-parallax swiper_wrapper full-screen clearfix" data-speed="600" data-loop="true">
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<!--First Slide-->
			<div class="swiper-slide">
			<!-- Any HTML content of the first slide goes here -->
			</div>

			<!--Second Slide-->
			<div class="swiper-slide">
			<!-- Any HTML content of the second slide goes here -->
			</div>

			<!--Third Slide-->
			<div class="swiper-slide">
			<!-- Any HTML content of the third slide goes here -->
			</div>
			<!--Etc..-->
		</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 class="slide-number"><div class="slide-number-current"></div><span>/</span><div class="slide-number-total"></div></div>
		<div class="swiper-pagination"></div>
	</div>
</section>

Initializing Canvas Swiper Slider using Custom Javascript

Canvas Swiper Sliders are initialized using the Standard Minimal Functionality by default, but there might instances when you would have to Create a Custom Functionality. To use this you can simply add the .customjs Class to #slider Container as this will stop it from using the Default Functionality and allow you to extend the Slider with your own Custom Functionality.

You can find more Canvas Swiper Slider related Settings for Custom JS Initialization here.

Canvas Swiper Slider Documentation

Last Modified: June 2, 2020

Need Help?