Basic Continuous Slide

    <div class="accolades-container fadeIn active">
        <div class="accolades">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
        </div>
    </div>

    <script>
    document.querySelector('.accolades-container .accolades')
    .innerHTML = document.querySelector('.accolades-container .accolades')
    .innerHTML + document.querySelector('.accolades-container .accolades').innerHTML;
    </script>

    <style>
    .accolades-container {
        overflow: hidden;
        margin-left:-5vw;
        width:72vw;
        .accolades {
            padding-top: 8vw;
            width: 415vw;
            animation: badgeScroll 190s linear infinite;
            display: flex;
            align-items: center;
            img {
                height:auto;
                width:9vw;
                margin: 0 1.5vw;
                width:5vw;
            }
        }
    }
    .accolades-container .accolades:hover {animation-play-state: paused;}
        @keyframes badgeScroll {
        0% {margin-left: 0vw;}
        100% {margin-left: -135vw;}
        }
    </style>

For Glide.js

For Slick Glider

Add links to stylesheets in the footer of the glider pages layout

<link rel="stylesheet" type="text/css" href="/assets/slick/slick.css">
<link rel="stylesheet" type="text/css" href="/assets/slick/slick-theme.css">

Incorporating the glider with lazyload feature

Add the `lazyload` class to a div a few above where the glider is. Then add `data-script="/assets/js/slick-settings.js"`inline of the same div.

Make any glider setting changes in /assets/js/slick-settings.js

Continuous glider

    <script>
        jQuery(document).ready(function ($) {
        $('.glider-class').slick({
            speed: 9000,
            autoplay: true,
            autoplaySpeed: 0,
            cssEase: 'linear',
            slidesToShow: 1,
            slidesToScroll: 1,
            variableWidth: true,
            });
        });
    </script>

Varying widths

    <script>
        $(document).ready(function () {
        $('.glider-class').slick({
            autoplay: false,
            centerMode: false,
            speed: 400,
            variableWidth: true,
            infinite: true,
            useTransform: false,
            });
        });
    </script>

Glider Specific Settings

Adding images as the Nex/Previous Arrows

    prevArrow:"<img class='a-left control-c prev slick-prev section-three' src='/assets/images/left-arrow.svg' alt='left arrow'>",
    nextArrow:"<img class='a-right control-c next slick-next section-three' src='/assets/images/right-arrow.svg' alt='right arrow'>",