Canvas Swiper Slider

Elegant Way to showcase your Website’s Prime Features

Code Example

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

		<div class="swiper-container 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.

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

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

Slider Pagination

To enable the Pagination, Slider Next/Prev Arrows or Slider Numbers simply add the related HTML Codes.

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

		<div class="swiper-container 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 class="slide-number"><div class="slide-number-current"></div><span>/</span><div class="slide-number-total"></div></div>
			<div class="swiper-pagination"></div>
		</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 8, 2021

Need Help?