Multiple Glider.js Instances

[ahsan154]

followed by your issue #24 , I need to integrate 3 glider sliders with different numbers of slidesToShow and slidesToScroll, e.g: in first glider slider i want to show 6, in second 4 and in third 2, kindly guide me in this matter please

here is my js code

window.addEventListener('load', function () {
                [].forEach.call(document.querySelectorAll('.glider'), function (ele) {
                ele.addEventListener('glider-slide-visible', function (event) {
                var glider
                        = Glider(this); console.log('Slide Visible %s', event.detail.slide)
                });
                ele.addEventListener('glider-slide-hidden', function (event) {
                console.log('Slide Hidden %s', event.detail.slide)
                });
                ele.addEventListener('glider-refresh', function (event) {
                console.log('Refresh')
                });
                ele.addEventListener('glider-loaded', function
                        (event) {
                console.log('Loaded')
                });
                new Glider(ele, {
                slidesToShow: 6,
                        slidesToScroll: 6,
                        scrollLock: true,
                        draggable: true,
                        dots: ele.parentNode.querySelector('.dots'),
                        arrows: {
                        prev: ele.parentNode.querySelector('.glider-prev'),
                                next: ele.parentNode.querySelector('.glider-next')
                        }
                });
                });
                });

[WhiteR4bbitt]

To get a unique config for each one, you either have to add a second class or something to identify with and create the config based on that. The other option is to use data- attributes on the HTML and call those. As for the dots/buttons if you want to make sure they exist (maybe 1 slider doesn't want them) you can check for them before passing in the config and pass in false, null or remove the KEY before passing the config in.

Here is a quick rough example that maybe helps you get the multi-config going.

// HTML
//  Pass it in as a single stringified Object, PARSE it in the script
<div class="glider" data-config="{}" ></div>
//  Numbers & Booleans are strings
<div class="glider" data-slidesToScroll="6" data-scrollLock="true" ></div>

// Script
window.addEventListener('DOMContentLoaded', function () {
        const gliders = document.querySelectorAll('.glider')
        if(!gliders.length) return

        gliders.forEach(function (ele) {
                let config = {}
                const dataSet = ele.dataset
                const dots = ele.parentNode?.querySelector('.dots')

                if(!!dataSet) config = {
                        slidesToShow: dataSet.slidesToShow,
                        slidesToScroll: dataSet.slidesToScroll || 6, // 6 is default if data value unset
                        slidesToShow: dataSet.scrollLock === "true" ? true : false, 
                        dots: dots || false
                }

                ele.addEventListener('glider-slide-visible', function (event) {
                        var glider = Glider(this); console.log('Slide Visible %s', event.detail.slide)
                });
                ele.addEventListener('glider-slide-hidden', function (event) {
                        console.log('Slide Hidden %s', event.detail.slide)
                });
                ele.addEventListener('glider-refresh', function (event) {
                        console.log('Refresh')
                });
                ele.addEventListener('glider-loaded', function  (event) {
                        console.log('Loaded')
                });
                
                new Glider(ele, config);
        });
});

[ahsan154]

Done Thanks alot