Today we are going to show you how to work with the Swiper slider.
Our Multipurpose Website templates use the Swiper Slider extension with advanced data-API user interface.
Open the *.html page in the editor. Locate an appropriate part of code using search for the ‘swiper’ keyword. Basic slider code structure will look like this:
You can adjust the behavior of the slider using data attributes. You can use the following data attributes for the element with swiper-slider class:
- data-loop — specifies if the slider stops on the last slide. You can use true/false values. Code looks like the following:
data-loop="false". - data-direction — specifies sliding direction, you can set horizontal/vertical value. Code looks like the following:
data-direction="vertical". - data-autoplay – specifies slider autoplay feature. In most cases the autoplay is enabled by default. You can use true/false values for it. You can also use milliseconds in order to define a time interval for switching the slides.
Examples of code:
data-autoplay="false"
data-autoplay="3000"
You can find more detailed information regarding the data attributes in the template documentation.
You can replace slider images in a few ways. First, you can change the original images and keep the same file names and extensions. Alternatively, you can specify the path to your new image in the slider code. Please, check the example of a particular slide code:
Path to the image is defined in the data-slide-bg attribute.
We have found out how to work with the Swiper slider. Now you can go ahead and customize the Swiper slider in your template.
