Swiper supports 'Prev'/'Next' buttons display for managing slider display. To display these buttons, please add the following marking to the target slider:

<div class="swiper-container swiper-slider">   <!-- Slider Navigation -->   <div class="swiper-button-prev"></div>   <div class="swiper-button-next"></div> </div>

Swiper supports slider pagination display. To display pagination, please add the following marking to the target slider:

<div class="swiper-container swiper-slider">     <!-- Slider Pagination -->     <div class="swiper-pagination"></div> </div>

In Swiper slider, you can change slides switching direction from horizontal to vertical. To do this, use the 'data-direction' ("horizontal"/"vertical", by default "horizontal") for the target element with the .swiper-slider class.

<div class="swiper-container swiper-slider" data-direction="vertical">    ... </div>

To add progress pagination in slider use the data-pagination-type='progress' :

<div class="swiper-container swiper-slider" data-pagination-type='progress'>    ... </div>

Basic markup for slider with Ken Burns effect:

<div class="swiper-container swiper-slider swiper-scale-effect">    <div class="swiper-wrapper">     <div class="swiper-slide" data-slide-bg="images/image-slide">       <div class="swiper-slide-cover" style="background: url(images/image-slide) center; background-size: cover;"></div>       ...     </div>   </div> </div>