Skip to content

NoviBuilder/novi-plugin-owl-carousel

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published