Mehrere Items Slider

1. offizieller Beitrag
    • Offizieller Beitrag
    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: