Mehrere Items Slider

Zitat von Woltlab Pluginstore Neu

Mit Hilfe dieses Plugins kann man ganz einfach einen Slider der gleichzeitig mehrere Items/Elemente anzeigt erstellen.

Dabei kann individuelle eingestellt werden, wie viele Mobile, Tablett und auch auf dem Desktop an Elemente gleichzeitig angezeigt werden.

Ein kleines Code Beispiel ist für das Artikelsystem dabei.

JavaScript: Slider.js

1. define(["WBBElite/WSC/Ui/Slider"], function (WBBEliteSlider) {
2. function ArticleSlider(Slider) {
3. this.init(Slider);
4. }
5. ArticleSlider.prototype = {
6. init: function (Slider) {
7. this._slider = Slider;
8. var articleList = this._slider.querySelectorAll('ul > li');
9. this.checkImageSlider(articleList);
10. },
11. /**
12. * Check if the first image load
13. *
14. * @param {NodeList} ArticleList
15. */
16. checkImageSlider: function (ArticleList) {
17. if (ArticleList.length > 0) {
18. if (ArticleList[0].querySelectorAll('.articleListImage > img').length == 0) {
19. this.initSlider();
20. } else {
21. var image = ArticleList[0].querySelectorAll('.articleListImage > img');
22. image[0].addEventListener('load', this.initSlider());
23. }
24. }
25. },
26. /**
27. * Show the article slider
28. */
29. initSlider: function () {
30. new WBBEliteSlider(this._slider, {items : 3});
31. }
32. };
33. return ArticleSlider;
34. });

Alles anzeigen

Quelle: