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);
}
})
}
});
}
}
});