SplideJS autoscroll on more than two splides problem

Viewed 16

At this moment I'm using two Splide JS splides. The first one works perfect, autoscroll works like it should. But the second one has problem with it. Autoscroll doesnt't work on it (despite including it to all splides). Does anyone know how to solve it? Here is my code

Script:

import Splide from '@splidejs/splide'
import {
    AutoScroll
} from '@splidejs/splide-extension-auto-scroll';

    let splides = document.querySelectorAll('.splide');
    new Splide('.splide').mount({
        AutoScroll
    });
    for (var i = 0; i < splides.length; i++) {
        let splideElement = splides[i];
        new Splide('.splide').mount(window.splide.Extensions)

        let splideDefaultOptions = {
            type: 'loop',
            drag: 'free',
            focus: 'center',
            autoScroll: {
                speed: 1,
            }
        }

        let splide = new Splide(splideElement, splideDefaultOptions);
        splide.mount();
    }

HTML:

<div class="splide" aria-labelledby="carousel-heading" data-splide='{"type":"loop", "rewind": "false"}'>
        <div class="splide__track">
            <ul class="splide__list">

                <?php foreach($opinion as $items) :?>

                <?php foreach($items->opinion as $key=>$item) :?>
                <li class="splide__slide">
                    <div class="opinion-box">
                        <div class="opinion-author">
                            <div class="author"><?= $item->author; ?></div>
                            <div class="rating">
                                <img src="<?= $item->rating->src; ?>">
                            </div>
                        </div>
                        <div class="line"></div>
                        <div class="opinion-box--content">
                            <p class="opinion"><?= $item->text; ?></p>
                        </div>
                    </div>
                </li>
                <?php endforeach ?>
                <?php endforeach ?>
            </ul>
        </div>
    </div>
0 Answers
Related