Our Support team is ready to present you a new tutorial that shows how to work with Swiper Slider in Website templates.
Connect to your FTP or open hosting cPanel File manager tool to reach site files.
Open your *.html file to locate slider code on the page (in most cases it’s index.html file). Use Ctrl+F to perform search by ‘swiper’ keyword or simply scroll down the page to see slider section:
Feel free to specify slider parameters in data-parameter data attributes, where ‘parameter’ is an option you need to change, e.g., data-height for slider height changing. Below you can find the list of attributes available for changing (for target item with “swiper-slider” class):
data-height – controls slider height, can take its value in *px (defines static height, it will stay unchanged on screen resize); *% (defines slider height as a percent of its width); *vh (defines slider height as a percent of window height).
data-min-height – defines slider height minimum similarly to data-height attribute.
data-autoplay – determines slider autostart, can be set to true/false to allow/prevent autosliding. It also accepts time values in milliseconds to define a period for slides switching, e.g. data-autoplay=”3000″.
data-loop – defines if slider will stop on the last slide, can take true/false values, e.g. data-loop=”false”.
data-direction – defines sliding direction, can take horizontal/vertical values, e.g. data-direction=”horizontal”.
data-slide-effect – determines sliding effect, can take fade/slide/coverflow/cube values, e.g. data-slide-effect=”slide”.
<div class="swiper-container swiper-slider" data-height="80vh" data-min-height="30px" data-autoplay="true" data-loop="false" data-direction="vertical" data-slide-effect="coverflow"> Slider content </div>
In order to change slides content, just edit path to slide image at the data-slide-bg attribute and update caption below. Feel free to refer to the example:
<div class="swiper-slide" data-slide-bg="images/page-01_slide01.jpg"> <div class="swiper-slide-caption"> <span class="rectangle"></span> <h1>The first slide goes here</h1> </div> </div>
where “images/page-01_slide01.jpg” is a slide image, and all the content in the block with “swiper-slide-caption” class is a slide caption.
Save changes and re-upload file back to server after editing if you’re using FTP. Next, refresh site page to see changes applied.
Feel free to check the detailed video tutorial below: