Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 

README.md

novi-plugin-swiper-slider

Novi Builder Plugin for visual Swiper Slider customization

How to Intall

You should follow several simple steps to intall this plugin:

  • Copy the novi-plugin-swiper-slider.js file to your path/to/novibuilder/plugins folder.
  • Launch NoviBuilder

What you are able to do

  • Change slide background image
  • Add/Remove slides
  • Change slider effect
  • Turn on/off slider autoplay
  • Set autoplay delay in seconds

Developer Settings

  • querySelector — containes a css selector which defines the Plugin container.
  • effect — containes available effects for choosing by user.

How to add Swiper Slider on your page

If your website doesn't contain Swiper Slider follow the instructions below to install it.

Include Swiper files to Website

Copy the "assets/swiper.js" and "assets/swiper.css" to website's JS and CSS folders respectively and include this files to your website.

Add Swiper HTML Layout

Add basic Swiper HTML Layout:

 <!-- Slider main container -->
 <div class="swiper-container">
     <!-- Additional required wrapper -->
     <div class="swiper-wrapper">
        <!-- If you want add slide with background image, add data-slide-bg attribute  -->
         <div class="swiper-slide" data-slide-bg="images/example.jpg">Slide 1
             <div class="swiper-slide-caption">

             </div>
         </div>
         <div class="swiper-slide">Slide 2</div>
         ...
     </div>
     <!-- If you need pagination -->
     <div class="swiper-pagination"></div>

     <!-- If you need navigation buttons -->
     <div class="swiper-button-prev"></div>
     <div class="swiper-button-next"></div>
 </div>

Initialize Swiper Slider

Initialize Swiper in JS by adding following block code:

$document.ready(function () {
    var isNoviBuilder = window.xMode;
    var swiper = $(".swiper-container");

    /**
     * getSwiperHeight
     * @description  calculate the height of swiper slider basing on data attr
     */
    function getSwiperHeight(object, attr) {
      var val = object.attr("data-" + attr),
        dim;

      if (!val) {
        return undefined;
      }

      dim = val.match(/(px)|(%)|(vh)$/i);

      if (dim.length) {
        switch (dim[0]) {
          case "px":
            return parseFloat(val);
          case "vh":
            return $window.height() * (parseFloat(val) / 100);
          case "%":
            return object.width() * (parseFloat(val) / 100);
        }
      } else {
        return undefined;
      }
    }

    /**
     * Swiper
     * @description  Enable Swiper Slider
     */
    if (swiper.length) {
      var i, j;
      for (i = 0; i < swiper.length; i++) {
        var s = $(swiper[i]);
        var pag = s.find(".swiper-pagination"),
          next = s.find(".swiper-button-next"),
          prev = s.find(".swiper-button-prev"),
          bar = s.find(".swiper-scrollbar"),
          swiperSlide = s.find(".swiper-slide"),
          autoplay = false;

        for (j = 0; j < swiperSlide.length; j++) {
          var $this = $(swiperSlide[j]),
            url;

          if (url = $this.attr("data-slide-bg")) {
            $this.css({
              "background-image": "url(" + url + ")",
              "background-size": "cover"
            })
          }
        }


        s.swiper({
            autoplay: s.attr('data-autoplay') ? s.attr('data-autoplay') === "false" ? undefined : s.attr('data-autoplay-delay') : 5000,
            direction: s.attr('data-direction') ? s.attr('data-direction') : "horizontal",
            effect: s.attr('data-slide-effect') ? s.attr('data-slide-effect') : "slide",
            speed: s.attr('data-slide-speed') ? s.attr('data-slide-speed') : 600,
            keyboardControl: s.attr('data-keyboard') === "true",
            mousewheelControl: s.attr('data-mousewheel') === "true",
            mousewheelReleaseOnEdges: s.attr('data-mousewheel-release') === "true",
            nextButton: next.length ? next.get(0) : null,
            prevButton: prev.length ? prev.get(0) : null,
            pagination: pag.length ? pag.get(0) : null,
            paginationClickable: pag.length ? pag.attr("data-clickable") !== "false" : false,
            paginationBulletRender: pag.length ? pag.attr("data-index-bullet") === "true" ? function (index, className) {
              return '<span class="' + className + '">' + (index + 1) + '</span>';
            } : null : null,
            scrollbar: bar.length ? bar.get(0) : null,
            scrollbarDraggable: bar.length ? bar.attr("data-draggable") !== "false" : true,
            scrollbarHide: bar.length ? bar.attr("data-draggable") === "false" : false,
            loop: isNoviBuilder ? false : s.attr('data-loop') !== "false",
            simulateTouch: s.attr('data-simulate-touch') && !isNoviBuilder ? s.attr('data-simulate-touch') === "true" : false,
            onInit: function (swiper) {
              $window.on('resize', function () {
                swiper.update(true);

                var mh = getSwiperHeight(s, "min-height"),
                  h = getSwiperHeight(s, "height");
                if (h) {
                  s.css("height", mh ? mh > h ? mh : h : h);
                }
              })
            }
          });
      }
    }
});

About

Novi Builder Plugin for visual Swiper Slider customization

Resources

Packages

No packages published
You can’t perform that action at this time.