CODEWITHSUNDEEP
javascriptslick.jsglidejs
jomofcw
jomofcw

Reputation: 21

How to synchronize two Sliders using Glide.js

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.

Upvotes: 2

Views: 3525

Answers (2)

GregSparrow
GregSparrow

Reputation: 36

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>

Upvotes: 2

Burak
Burak

Reputation: 44

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.

Upvotes: 0

Related Questions