Einbindung von Slick Slider

Aze · Aug 24th 2020

Moin,

ich versuche mich gerade daran, den Slick Slider https://github.com/kenwheeler/slick in die Woltlab Suite als Box einzubinden, scheitere aber daran, diesen zum Laufen zu kriegen. Ich habe mich schon auf diversen Plattformen belesen, u. a. Stackoverflow, dieses brachte aber nicht den gewünschten Erfolg.

Es wurde mehrfach darauf hingewiesen, erst jQuery und dann slick.js laden zu lassen, was ich meiner Meinung nach auch getan habe. Ich erhalte beim Aufruf dennoch folgende Fehlermeldungen in der Console:

Code

jQuery.Deferred exception: $(...).slick is not a function @https://domain.tld/:1319:5
e@https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js:2:30003
l/</t<@https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js:2:30307
 undefined
jquery.min.js:2:31550

TypeError: $(...).slick is not a function

domain.tld:1319:5

Mein Code:

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" />

<script data-relocate="true" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script data-relocate="true" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous"></script>

<div class="slick">
    <div><img src="https://via.placeholder.com/468x60"></div>
    <div><img src="https://via.placeholder.com/468x60"></div>
    <div><img src="https://via.placeholder.com/468x60"></div>
    <div><img src="https://via.placeholder.com/468x60"></div>
    <div><img src="https://via.placeholder.com/468x60"></div>
    <div><img src="https://via.placeholder.com/468x60"></div>
</div>

<script data-relocate="true">
$(document).ready(function(){
    $('.slick').slick({
        infinite: true
    });
});
</script>

Display More

Wo ist mein Denkfehler bzw. der Fehler, der den Slider nicht zur Ausführung bewegt?

**Alexander Ebert** · Aug 24th 2020

In jedem Fall solltest du Zeile 4 entfernen, denn wir laden bereits jQuery.

Aze · Aug 24th 2020

Quote from Alexander Ebert

In jedem Fall solltest du Zeile 4 entfernen, denn wir laden bereits jQuery.

Danke, habe ich entfernt. Bleibt nur die Frage, warum der Slider nicht geladen wird und mir die obige Fehlermeldung ausgegeben wird.

**Alexander Ebert** · Aug 24th 2020

In dem Fall ist eine aktuelle Fehlermeldung notwendig, denn die obige kann nicht mehr aktuell sein, wenn du die Einbindung von jQuery entfernt hast.

Aze · Aug 24th 2020

Quote from Alexander Ebert

In dem Fall ist eine aktuelle Fehlermeldung notwendig, denn die obige kann nicht mehr aktuell sein, wenn du die Einbindung von jQuery entfernt hast.

Code

WCF.Combined.min.js?v=1597389493:5 jQuery.Deferred exception: $(...).slick is not a function TypeError: $(...).slick is not a function
    at HTMLDocument.<anonymous> (https://domain.tld/forum/:1257:17)
    at f (https://domain.tld/js/WCF.Combined.min.js?v=1597389493:5:8952)
    at p (https://domain.tld/js/WCF.Combined.min.js?v=1597389493:5:9255) undefined
we.Deferred.exceptionHook @ WCF.Combined.min.js?v=1597389493:5
WCF.Combined.min.js?v=1597389493:5 Uncaught TypeError: $(...).slick is not a function
    at HTMLDocument.<anonymous> ((index):1257)
    at f (WCF.Combined.min.js?v=1597389493:5)
    at p (WCF.Combined.min.js?v=1597389493:5)
default.manifest.json:1 Failed to load resource: the server responded with a status of 401 ()
default.manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.

Display More

**Alexander Ebert** · Aug 24th 2020

Gibt es eventuell einen Live-Link, über den man sich das ansehen kann? Die Fehlermeldung gibt leider keine wirkliche Erklärung dafür, warum das Plugin nicht gefunden werden kann.

Burakkii Inaba · Aug 24th 2020

muss das nicht in etwa so eingebaut werden

Code

require([WCF_PATH +'js/3rdParty/slick.min.js'], function (slick) {
        $(document).ready(function(){.....

auf die schnelle (Locale.JS datei kein cdn gedönst)

Code

<script data-relocate="true">
    require([WCF_PATH +'js/3rdParty/slick.min.js'], function (slick) {
        $(document).ready(function(){
            $('.slick').slick({
                // Smartphone first calculate
                mobileFirst:true,
                slidesToShow: 1,
                slidesToScroll: 1,
                autoplay: true,
                autoplaySpeed: 2500,
                arrows: false,
                dots: false,
                pauseOnHover: false,
                adaptiveHeight: false,
                  responsive: [
                    {
                      breakpoint: 1124,
                      settings: {
                        slidesToShow: 4,
                        slidesToScroll: 1,
                      }
                    },
                    {
                      breakpoint: 1024,
                      settings: {
                        slidesToShow: 3,
                        slidesToScroll: 1,
                      }
                    },
                    {
                      breakpoint: 800,
                      settings: {
                        slidesToShow: 3,
                        slidesToScroll: 1,
                      }
                    },
                    {
                      breakpoint: 600,
                      settings: {
                        slidesToShow: 2,
                        slidesToScroll: 1,
                      }
                    },
                    {
                      breakpoint: 480,
                      settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1
                      }
                    }
                    // You can unslick at a given breakpoint now by adding:
                    // settings: "unslick"
                    // instead of a settings object
                  ]
            });
        });
    });
</script>

<div class="slick">
    <div><img src="https://via.placeholder.com/468x60"></div>
    <div><img src="https://via.placeholder.com/468x60"></div>
    <div><img src="https://via.placeholder.com/468x60"></div>
    <div><img src="https://via.placeholder.com/468x60"></div>
    <div><img src="https://via.placeholder.com/468x60"></div>
    <div><img src="https://via.placeholder.com/468x60"></div>
</div>

Display More

Hitman · Aug 24th 2020

So funktioniert das

LRDE · Aug 24th 2020

Das nutzt du nun wofür wenn man fragen darf?

Hitman · Aug 24th 2020

Quote from LRDE

Das nutzt du nun wofür wenn man fragen darf?

Das kannst du für alles Mögliche verwenden. Halt ein Slider

Bilder (hauptsächlich)
Inhalte aller Art

die hier eingesetzt werden

<div><img src="https://via.placeholder.com/468x60"></div>

Wofür, bleibt jedem selber überlassen

LRDE · Aug 25th 2020

Hatte nur gefragt weil es interessant aussieht

Einbindung von Slick Slider

Participate now!

Share

Similar Threads

Fehler bei Update auf 5.2 RC2 [error.databaseChange]

Tags