mirrors-Glider.js
/
index.html

<!doctype html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <style type="text/css">@-ms-viewport{width:auto!important;}</style>
    <link rel="stylesheet" type="text/css" href="glider.css" />
    <script src="glider.js"></script>
    <script>
      window.addEventListener('load',function(){
        document.querySelector('.glider').addEventListener('glider-slide-visible', function(event){
            var glider = Glider(this);
            console.log('Slide Visible %s', event.detail.slide)
        });
        document.querySelector('.glider').addEventListener('glider-slide-hidden', function(event){
            console.log('Slide Hidden %s', event.detail.slide)
        });
        document.querySelector('.glider').addEventListener('glider-refresh', function(event){
            console.log('Refresh')
        });
        document.querySelector('.glider').addEventListener('glider-loaded', function(event){
            console.log('Loaded')
        });

        window._ = new Glider(document.querySelector('.glider'), {
            slidesToShow: 1, //'auto',
            slidesToScroll: 1,
            itemWidth: 150,
            draggable: true,
            scrollLock: false,
            dots: '#dots',
            rewind: true,
            arrows: {
                prev: '.glider-prev',
                next: '.glider-next'
            },
            responsive: [
                {
                    breakpoint: 800,
                    settings: {
                        slidesToScroll: 'auto',
                        itemWidth: 300,
                        slidesToShow: 'auto',
                        exactWidth: true
                    }
                },
                {
                    breakpoint: 700,
                    settings: {
                        slidesToScroll: 4,
                        slidesToShow: 4,
                        dots: false,
                        arrows: false,
                    }
                },
                {
                    breakpoint: 600,
                    settings: {
                        slidesToScroll: 3,
                        slidesToShow: 3
                    }
                },
                {
                    breakpoint: 500,
                    settings: {
                        slidesToScroll: 2,
                        slidesToShow: 2,
                        dots: false,
                        arrows: false,
                        scrollLock: true
                    }
                }
            ]
        });
      });
    </script>


    <!--
        Used to frame the glider on the page

        Not necessary for Glider.js
    -->
    <style type="text/css">
        * {
            box-sizing: border-box
        }
        html, body {
            width: 100%;
            overflow: hidden;
        }
        .glider-contain {
            width: 90%;
            max-width: 997px;
            margin: 0 auto;
        }
        .glider-slide {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 300px;
            border: 3px solid currentColor;
            background-image: url('logo.svg');
            background-size:contain;
            background-repeat: no-repeat;
            background-position: center;

        }
        .glider-slide img {
            width: 100%;
        }
        .glider-slide .slide-title {
            font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
            /* https://modernfontstacks.com/ */
            font-size: 3rem;
            position: relative;
            top: 100px;
        }

        .glider-slide:nth-child(4n+1){
            color:#8cc9f0;
        }
        .glider-slide:nth-child(4n+2) {
            color:#a89cc8;
        }
        .glider-slide:nth-child(4n+3) {
            color:#efa8b0;
        }
        .glider-slide:nth-child(4n) {
            color:#9ef096;
        }


    </style>
  </head>
  <body>
    <div class="glider-contain">
        <div class="glider">
            <div><span class="slide-title">Slide 1</span></div>
            <div><span class="slide-title">Slide 2</span></div>
            <div><span class="slide-title">Slide 3</span></div>
            <div><span class="slide-title">Slide 4</span></div>
            <div><span class="slide-title">Slide 5</span></div>
            <div><span class="slide-title">Slide 6</span></div>
            <div><span class="slide-title">Slide 7</span></div>
            <div><span class="slide-title">Slide 8</span></div>
            <div><span class="slide-title">Slide 9</span></div>
            <div><span class="slide-title">Slide 10</span></div>
            <div><span class="slide-title">Slide 11</span></div>
            <div><span class="slide-title">Slide 12</span></div>
            <div><span class="slide-title">Slide 13</span></div>
            <div><span class="slide-title">Slide 14</span></div>
            <div><span class="slide-title">Slide 15</span></div>
            <div><span class="slide-title">Slide 16</span></div>
        </div>
        <button class="glider-prev">&laquo;</button>
        <button class="glider-next">&raquo;</button>
        <div id="dots"></div>
    </div>
  </body>
</html>