Moin,
ich versuche, auf Basis eines bereits von mir erstellten Themas Einbindung von Slick Slider, Splide (https://splidejs.com/guides/getting-started/) in meiner lokalen Testumgebung zu integrieren. Leider resultiert die Einbindung in eine für mich nicht nachvollziehbare Fehlermeldung.
Code
jQuery.Deferred exception: Splide is not defined @https://dev.test/:937:4
f@https://dev.test/cms/js/WCF.Combined.min.js?v=1673215378:4:39230
Deferred/then/o/</p<@https://dev.test/cms/js/WCF.Combined.min.js?v=1673215378:4:39533
setTimeout handler*Deferred/then/o/<@https://dev.test/cms/js/WCF.Combined.min.js?v=1673215378:4:39746
l@https://dev.test/cms/js/WCF.Combined.min.js?v=1673215378:4:37504
add@https://dev.test/cms/js/WCF.Combined.min.js?v=1673215378:4:37786
Deferred/then/<@https://dev.test/cms/js/WCF.Combined.min.js?v=1673215378:4:39853
Deferred@https://dev.test/cms/js/WCF.Combined.min.js?v=1673215378:4:40275
then@https://dev.test/cms/js/WCF.Combined.min.js?v=1673215378:4:39780
Vt.fn.ready@https://dev.test/cms/js/WCF.Combined.min.js?v=1673215378:4:40988
@https://dev.test/:936:15
e.require/l<@https://dev.test/cms/js/WoltLabSuite.Core.min.js?v=1673215378:1:560211
promise callback*e.require@https://dev.test/cms/js/WoltLabSuite.Core.min.js?v=1673215378:1:560184
@https://dev.test/:935:9
undefinedCode
Uncaught ReferenceError: Splide is not defined
<anonymous> (index):937
f WCF.Combined.min.js:4
p WCF.Combined.min.js:4
setTimeout handler*Deferred/then/o/< WCF.Combined.min.js:4
l WCF.Combined.min.js:4
add WCF.Combined.min.js:4
then WCF.Combined.min.js:4
Deferred WCF.Combined.min.js:4
then WCF.Combined.min.js:4
ready WCF.Combined.min.js:4
<anonymous> (index):936
l require.linearExecution.js:32
promise callback*e.require require.linearExecution.js:31
<anonymous> (index):935Der Code des Templates sieht wie folgt aus:
HTML
<section class="splide">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">Slide 01</li>
<li class="splide__slide">Slide 02</li>
<li class="splide__slide">Slide 03</li>
</ul>
</div>
</section>
<script data-relocate="true">
function shuffleArray(arr) {
var cnt = arr.length, rnd, tmp;
while(cnt) {
rnd = Math.random() * cnt-- | 0;
tmp = arr[cnt];
arr[cnt] = arr[rnd];
arr[rnd] = tmp;
}
}
var container = document.getElementsByClassName('splide__list')[0];
var slides = [].slice.call(document.getElementsByClassName('splide__slide'));
shuffleArray(slides);
slides.forEach(container.appendChild.bind(container));
require([WCF_PATH +'js/3rdParty/splide.min.js'], function (splide) {
$(document).ready(function(){
new Splide('.splide', {
type : 'fade',
pagination : true,
autoplay : true,
lazyLoad : 'sequential',
interval : 15000,
rewind : true,
perPage : 1
}).mount();
});
});
</script>Wo liegt der Fehler bzw. wie ließe sich der Slider ordnungsgemäß einbinden?
