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

Private Content

You must be logged in with your Envato Account for Free in order to view this Content.

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?