Canvas Swiper Slider
Elegant Way to showcase your Website's Prime Features
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
<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 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.