2

I'm planing on replacing slick.js sliders by glide.js. But I need a feature I used in Slick and I can't find in Glide : synchronize two sliders. As I use one for navigation (with small images) and one for the main view (with biggest images, one by one). You can see an example on the web page : https://www.variance-auto.com/materiels-de-pose/Ecarteur-de-Joint-Edge-pour-ecarter-le-joint-lecheur

How can I achieve it using Glide, please ?

Thanks for your incoming help.

jomofcw
  • 21
  • 1
  • 3

2 Answers2

2

Using event run it is pretty achievable.

<!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>
GregSparrow
  • 36
  • 4
0

I don't know if Glide.js supports synchronizing. You can ask this on its Github page. If it doesn't have such a feature, I would simply do this:

Getting index number of both two sliders with glide__slide--active class when click event occurs, and then I would synchronize these two sliders to that index number.

Burak
  • 44
  • 8
  • Thanks for your answer. Yep that's what I'm planing for, but I would like to know if there is a built-in feature which achieve it to avoid code recurrence. – jomofcw Jul 09 '19 at 08:46