Question

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

请问如何使用Glide实现它？

感谢您的帮助。

Answer 1

使用事件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>

Answer 2

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

发生单击事件时，使用glide__slide--active类获取两个滑块的索引号，然后将这两个滑块同步到该索引号。

如何使用Glide.js同步两个Slider

2 个答案: