我计划用 glide.js 替换 slick.js slider 。 但我需要一个在 Slick 中使用过但在 Glide 中找不到的功能:同步两个 slider 。因为我使用一个用于导航(带有小图像)，一个用于主视图(带有最大的图像，一张一张)。 您可以在网页上看到一个示例:https://www.variance-auto.com/materiels-de-pose/Ecarteur-de-Joint-Edge-pour-ecarter-le-joint-lecheur
请问如何使用 Glide 实现它？
感谢您的帮助。
最佳答案
使用事件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>
关于javascript - 如何使用 Glide.js 同步两个 slider ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56937018/