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 slidefade
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,

  • none
  • bullets
  • progress
  • scrollbar
  • fraction
  • thumbnails

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%)

Still need help? Contact Us Contact Us