2

我打算用 glide.js 替换 slick.js 滑块。但我需要一个我在 Slick 中使用过但在 Glide 中找不到的功能：同步两个滑块。因为我使用一个用于导航（带有小图像）和一个用于主视图（带有最大的图像，一张一张）。您可以在网页上看到一个示例：https ://www.variance-auto.com/materiels-de-pose/Ecarteur-de-Joint-Edge-pour-ecarter-le-joint-lecheur

请问如何使用 Glide 实现它？

感谢您的到来帮助。

4

2 回答 2

2

使用事件run是可以实现的。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="node_modules/@glidejs/glide/dist/css/glide.core.min.css">
    <script src="node_modules/@glidejs/glide/dist/glide.min.js"></script>
</head>

<body>

    <div id="g1" class="glide">
        <div class="glide__track" data-glide-el="track">
            <ul class="glide__slides">
                <li class="glide__slide">0</li>
                <li class="glide__slide">1</li>
                <li class="glide__slide">2</li>
            </ul>

        </div>

        <div class="glide__arrows" data-glide-el="controls">
            <button class="glide__arrow glide__arrow--left" data-glide-dir="<">prev</button>
            <button class="glide__arrow glide__arrow--right" data-glide-dir=">">next</button>
        </div>
    </div>


    <div id="g2" class="glide">
        <div class="glide__track" data-glide-el="track">
            <ul class="glide__slides">
                <li class="glide__slide">0</li>
                <li class="glide__slide">1</li>
                <li class="glide__slide">2</li>
            </ul>
        </div>
    </div>

    <script>
            const gl1 = new Glide('#g1')
            const gl2 = new Glide('#g2')

            gl1.mount();
            gl2.mount();

            gl1.on('run', (e) => {
                gl2.go(e.direction);
            })

    </script>
</body>
于 2019-11-18T10:02:49.360 回答
0

我不知道 Glide.js 是否支持同步。你可以在它的 Github 页面上问这个。如果它没有这样的功能，我会这样做：

当点击事件发生时，获取两个滑块的索引号glide__slide--active，然后我会将这两个滑块同步到该索引号。

于 2019-07-08T14:50:14.407 回答