With the help of this plugin you can easily create a slider that displays multiple items / elements at the same time.
It can be set individually, how many mobile, tablet and also on the desktop to display elements at the same time.
A small code example is included for the article system.
JavaScript: Slider.js
A small code example is included for the article system.define(["WBBElite/WSC/Ui/Slider"], function (WBBEliteSlider) {
function ArticleSlider(Slider) {
this.init(Slider);
}
ArticleSlider.prototype = {
init: function (Slider) {
this._slider = Slider;
var articleList = this._slider.querySelectorAll('ul > li');
this.checkImageSlider(articleList);
},
/**
* Check if the first image load
*
* @param {NodeList} ArticleList
*/
checkImageSlider: function (ArticleList) {
if (ArticleList.length > 0) {
if (ArticleList[0].querySelectorAll('.articleListImage > img').length == 0) {
this.initSlider();
} else {
var image = ArticleList[0].querySelectorAll('.articleListImage > img');
image[0].addEventListener('load', this.initSlider());
}
}
},
/**
* Show the article slider
*/
initSlider: function () {
new WBBEliteSlider(this._slider, {items : 3});
}
};
return ArticleSlider;
});
Display More
-
Version 1.0.0
-
SgtKaneki -
December 23, 2017 at 12:57 PM -
4.84 kB -
116 Downloads
-




