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-owl-carousel

Novi Builder Plugin for visual Owl Carousel customization

How to Install

You should follow several simple steps to install this plugin:

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

What you are able to do

  • Change item amount on different resolutions
  • Change indent between items on different resolutions
  • Add/Remove carousel items
  • Turn on/off carousel autoplay
  • Turn on/off carousel loop
  • Set autoplay delay in seconds

Developer Settings

  • querySelector — containes a css selector which defines the Plugin container.

How to add Owl Carousel on your page

If your website doesn't contain Owl Carousel follow the instructions below to install it.

Include Owl files to Website

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

Add Owl HTML Layout

Add basic Owl HTML Layout:

//owl container
 <div class="owl-carousel>
    <div> //owl item
    ...
    </div>
    ...
 </div>

Initialize Owl Carousel

Initialize Owl in JS by adding following block code:

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

    /**
     * Owl carousel
     * @description Enables Owl carousel plugin
    */
    if (owl.length) {
      var i;
      for (i = 0; i < owl.length; i++) {
        var c = $(owl[i]);
        owl[i].owl = c;
        var aliaces = ["-", "-xs-", "-sm-", "-md-", "-lg-"],
        values = [0, 480, 768, 992, 1200],
        responsive = {},
        j, k;

      for (j = 0; j < values.length; j++) {
        responsive[values[j]] = {};
        for (k = j; k >= -1; k--) {
          if (!responsive[values[j]]["items"] && c.attr("data" + aliaces[k] + "items")) {
            responsive[values[j]]["items"] = k < 0 ? 1 : parseInt(c.attr("data" + aliaces[k] + "items"), 10);
          }
          if (!responsive[values[j]]["stagePadding"] && responsive[values[j]]["stagePadding"] !== 0 && c.attr("data" + aliaces[k] + "stage-padding")) {
            responsive[values[j]]["stagePadding"] = k < 0 ? 0 : parseInt(c.attr("data" + aliaces[k] + "stage-padding"), 10);
          }
          if (!responsive[values[j]]["margin"] && responsive[values[j]]["margin"] !== 0 && c.attr("data" + aliaces[k] + "margin")) {
            responsive[values[j]]["margin"] = k < 0 ? 30 : parseInt(c.attr("data" + aliaces[k] + "margin"), 10);
          }
        }
      }
      c.owlCarousel({
        autoplay: isNoviBuilder ? false : c.attr("data-autoplay") === "true",
        loop: isNoviBuilder ? false : c.attr("data-loop") !== "false",
        dotsContainer: c.attr("data-pagination-class") || false,
        navContainer: c.attr("data-navigation-class") || false,
        mouseDrag: isNoviBuilder ? false : c.attr("data-mouse-drag") !== "false",
        nav: c.attr("data-nav") === "true",
        dots: c.attr("data-dots") === "true",
        dotsEach: c.attr("data-dots-each") ? parseInt(c.attr("data-dots-each"), 10) : false,
        animateIn: c.attr('data-animation-in') ? c.attr('data-animation-in') : false,
        animateOut: c.attr('data-animation-out') ? c.attr('data-animation-out') : false,
        responsive: responsive,
        navText: $.parseJSON(c.attr("data-nav-text")) || [],
        navClass: $.parseJSON(c.attr("data-nav-class")) || ['owl-prev', 'owl-next']
      });
      }
    }
});

About

No description, website, or topics provided.

Resources

Releases

No releases published

Packages

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