Here is the HTML Code for the Canvas Swiper Slider:
<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>
.swiper-slide
element, to make the Caption Content & the Header Scheme(only on Transparent Header) "Dark".
Setting | Description |
---|---|
|
Direction of the Slide Animation. Option(s): horizontal, vertical |
|
Speed of the Slide Animation in milliseconds. Ex: 500 |
|
Pause Time between Slide's Autoplay Transition in milliseconds. Ex: 5000 |
|
Enable/Disable Slider Loop. Option(s): true, false |
|
Slide Effect. Option(s): slide, fade, cube, coverflow, flip |
|
Enable/Disable Grab Cursor Option(s): true, false |
|
Enable/Disable Video Autoplay. Option(s): true, false |
<div id="slider" class="slider-parallax swiper_wrapper clearfix" style="height: 400px;">
...
</div>
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>
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.
Last Modified: June 2, 2020