Docs - Slider
We have prepared special responsive slider for you, you can insert not only images but any content you want in it, for example grid row with columnsor even more rows, it has some options, that are to help you conrol slider styles. It can has arrows and pagination or not. You can pass classes for different elements as slider options. Some of options controlled by css classnames and some by js slider initiation code.
Connect slider.css, loader.css, pi.slider.js, pi.imagesLoader.js, pi.detectTransition.js to use sliders.
Examples below show only basic slider content, you can find additional example here ex1, ex2
Simple slider HTML example
<div class="pi-slider-wrapper"> <div class="pi-slider pi-slider-animate-opacity pi-padding-bottom-20"> <div class="pi-slide"> <img src="img_external/gallery/img-20.jpg" alt=""/> </div> <div class="pi-slide"> <img src="img_external/gallery/img-21.jpg" alt=""/> </div> </div> </div>
Controls inside
You can add pi-slider-arrows-inside or pi-slider-pagination-inside or even both classes to pi-slider-wrapper block.
<div class="pi-slider-wrapper pi-slider-arrows-inside pi-slider-pagination-inside"> <div class="pi-slider pi-slider-animate-opacity pi-padding-bottom-20"> <div class="pi-slide"> <img src="img_external/gallery/img-20.jpg" alt=""/> </div> <div class="pi-slide"> <img src="img_external/gallery/img-21.jpg" alt=""/> </div> </div> </div>
Show controls on hover
You can add pi-slider-show-arrow-hover and pi-slider-show-pagination-hover to pi-slider-wrapper block. Does't matter are your controls positioned inside or outside slider.
<div class="pi-slider-wrapper pi-slider-show-arrow-hover pi-slider-show-pagination-hover"> <div class="pi-slider pi-slider-animate-opacity pi-padding-bottom-20"> <div class="pi-slide"> <img src="img_external/gallery/img-20.jpg" alt=""/> </div> <div class="pi-slide"> <img src="img_external/gallery/img-21.jpg" alt=""/> </div> </div> </div>
Slide out and fade in controls on hover
You can add pi-slider-slide-arrows-hover or pi-slider-slide-pagination-hover or even both classes to pi-slider-wrapper block. Of course controls should be inside if you want them slide out on hover.
<div class="pi-slider-wrapper pi-slider-arrows-inside pi-slider-pagination-inside pi-slider-slide-arrows-hover pi-slider-slide-pagination-hover pi-slider-show-arrow-hover pi-slider-show-pagination-hover"> <div class="pi-slider pi-slider-animate-opacity pi-padding-bottom-20"> <div class="pi-slide"> <img src="img_external/gallery/img-20.jpg" alt=""/> </div> <div class="pi-slide"> <img src="img_external/gallery/img-21.jpg" alt=""/> </div> </div> </div>
Slide effect
You can add data-slider-action="slide" to pi-slider block in order to change image switching effect.
<div class="pi-slider-wrapper pi-slider-arrows-inside pi-slider-pagination-inside pi-slider-slide-arrows-hover pi-slider-slide-pagination-hover pi-slider-show-arrow-hover pi-slider-show-pagination-hover"> <div class="pi-slider pi-slider-animate-opacity" data-slider-action="slide"> <div class="pi-slide"> <img src="img_external/gallery/img-20.jpg" alt=""/> </div> <div class="pi-slide"> <img src="img_external/gallery/img-21.jpg" alt=""/> </div> </div> </div>
Hide slide effects outside the box.
You can wrap you pi-slider block with in order to change hide image switching effect out of the box. Remove pi-slider-animate-opacity class as well, because there is no sense in affecting images transparency with slide effect.
<div class="pi-slider-wrapper pi-slider-arrows-inside pi-slider-pagination-inside pi-slider-slide-arrows-hover pi-slider-slide-pagination-hover pi-slider-show-arrow-hover pi-slider-show-pagination-hover"> <div class="pi-slider pi-padding-bottom-20" data-slider-action="slide"> <div class="pi-slide"> <img src="img_external/gallery/img-20.jpg" alt=""/> </div> <div class="pi-slide"> <img src="img_external/gallery/img-21.jpg" alt=""/> </div> </div> </div>
Autoplay
Set autoplay delay with data-slider-autoplay-delay attribute to setup slider autoplay.
<div class="pi-slider-wrapper"> <div class="pi-slider pi-slider-animate-opacity pi-padding-bottom-20" data-slider-autoplay-delay="5000"> <div class="pi-slide"> <img src="img_external/gallery/img-20.jpg" alt=""/> </div> <div class="pi-slide"> <img src="img_external/gallery/img-21.jpg" alt=""/> </div> </div> </div>
Enable/disable keyboard controls
Enable/disable keyboard controls using data-slider-Keys attribute. Default enabled - 1, disabled - 0
<div class="pi-slider-wrapper"> <div class="pi-slider pi-slider-animate-opacity pi-padding-bottom-20" data-slider-keys="0"> <div class="pi-slide"> <img src="img_external/gallery/img-20.jpg" alt=""/> </div> <div class="pi-slide"> <img src="img_external/gallery/img-21.jpg" alt=""/> </div> </div> </div>
Enable/disable pagination
Enable/disable pagination using data-slider-pagination attribute. Default enabled - 1, disabled - 0
<div class="pi-slider-wrapper"> <div class="pi-slider pi-slider-animate-opacity pi-padding-bottom-20" data-slider-pagination="0"> <div class="pi-slide"> <img src="img_external/gallery/img-20.jpg" alt=""/> </div> <div class="pi-slide"> <img src="img_external/gallery/img-21.jpg" alt=""/> </div> </div> </div>
Enable/disable arrows
Enable/disable arrows using data-slider-arrows attribute. Default enabled - 1, disabled - 0
<div class="pi-slider-wrapper"> <div class="pi-slider pi-slider-animate-opacity pi-padding-bottom-20" data-slider-arrows="0"> <div class="pi-slide"> <img src="img_external/gallery/img-20.jpg" alt=""/> </div> <div class="pi-slide"> <img src="img_external/gallery/img-21.jpg" alt=""/> </div> </div> </div>
Enable/disable circular action
Enable/disable circular action using data-slider-circular attribute. Default enabled - 1, disabled - 0
<div class="pi-slider-wrapper"> <div class="pi-slider pi-slider-animate-opacity pi-padding-bottom-20" data-slider-circular="0"> <div class="pi-slide"> <img src="img_external/gallery/img-20.jpg" alt=""/> </div> <div class="pi-slide"> <img src="img_external/gallery/img-21.jpg" alt=""/> </div> </div> </div>
Enable/disable preloader
Enable/disable preloader using data-slider-preloader attribute. Default enabled - 1, disabled - 0
<div class="pi-slider-wrapper"> <div class="pi-slider pi-slider-animate-opacity pi-padding-bottom-20" data-slider-preloader="0"> <div class="pi-slide"> <img src="img_external/gallery/img-20.jpg" alt=""/> </div> <div class="pi-slide"> <img src="img_external/gallery/img-21.jpg" alt=""/> </div> </div> </div>
Control preloader delay
Control preloader delay using data-slider-preloader-delay attribute. Default - 1000 (one second)
<div class="pi-slider-wrapper"> <div class="pi-slider pi-slider-animate-opacity pi-padding-bottom-20" data-slider-preloader-delay="0"> <div class="pi-slide"> <img src="img_external/gallery/img-20.jpg" alt=""/> </div> <div class="pi-slide"> <img src="img_external/gallery/img-21.jpg" alt=""/> </div> </div> </div>
