Mehrere Items Slider

  • 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: