Novi Builder Plugin for visual Swiper Slider customization
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
- Change slide background image
- Add/Remove slides
- Change slider effect
- Turn on/off slider autoplay
- Set autoplay delay in seconds
- querySelector — containes a css selector which defines the Plugin container.
- effect — containes available effects for choosing by user.
If your website doesn't contain Swiper Slider follow the instructions below to install it.
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 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 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);
}
})
}
});
}
}
});