Using SwiperSlider w/ Blvd
The Blvd Framework JS includes SwiperSlider out of the box. The module is loaded using our standard JS loading pattern of RequireJS. It can be easily loaded on a page with some HTML markup and a few data attributes.
<div class="swiper-container" data-swiperslider data-options="{{slider-options}}" data-ratio="{{ratio-class}}" data-swipertype="{{controller-type}}">
<img class="swiper-lazy" data-src="{{img-src}}" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==" alt="{{alt-text}}">
<img...>
</div>
For data-options, you need to list out all of the settings in this format data-options="options1;options2;". Below is the list of main options
| Options Name | Usage |
|---|---|
autoplay |
Autoplay and add the duration for each slide ex: autoslide:3000 |
effect |
slide, fade |
direction |
The position of bullets navigation. Has to hide arrow navigation vertical or horizontal |
slidesPerView |
Slides per Row |
slidesPerColumn |
Slides per Column |
spaceBetween |
Space between the slides |
You can see all of other options, please check out the Swiper Slider site (There are quite a lot of options) [API setting list] ( http://idangero.us/swiper/api/)
For data-ratio,
It uses our standard ratio CSS classes, here is the list of options (Ex: data-ratio:"16:9")
- 4:3 (default)
- 16:9
- 3:2
- 1:1
For data-swipertype,
nonebulletsprogressscrollbarfractionthumbnails
Notes:
- You can use more than one controller at the time
- The javascript will take care of the slider settings, you do not need to do anything with the data-options
For thumbnails style,
You can target .gallery-thumbs .swiper-slide, width with CSS to change the width of each thumbnail slide. (Default is 25%)
And .gallery-top, .gallery-thumbs height ratio with 100% to change the ratio for each of them with respect to the container (Default .gallery-top 80%, gallery-thumbs 20%)