fordstl-customization

hero-carousel-mobile.html

<style>
    @media (max-width: 800px) {
        .heroCarousel-container:not(.heroCarousel-container--mobileOnly) {
            display: none;
        }
    }
    @media (min-width: 801px) {
        .heroCarousel-container--mobileOnly {
            display: none;
        }
    }
</style>
<section class="heroCarousel-container heroCarousel-container--mobileOnly">
    <div class="heroCarousel"
        data-slick='{
            "dots": true,
            "mobileFirst": true,
            "slidesToShow": 1,
            "slidesToScroll": 1,
            "autoplay": true,
            "autoplaySpeed": 5000,
            "lazyLoad": "anticipated"
        }'
        data-youtube-autoplay>
        <div class="heroCarousel-slide  heroCarousel-slide--0 heroCarousel-slide--first">
            <div class="heroCarousel-image-wrapper heroCarousel-image-wrapper--sized">
                <a href="https://fordstl.com/contact-us/">
                    <div class="heroCarousel-image-box" style="width:1920px">
                        <div class="heroCarousel-image-box-padding" style="padding-bottom:100%">
                            <img src="https://cdn11.bigcommerce.com/s-g3i86bef61/images/stencil/800w/carousel/18/Ford_NewWebsite.jpg?c=1" alt="Welcome our website has a new look." title="Welcome our website has a new look." data-sizes="auto"
                            class=" heroCarousel-image"
                            width="800" height="800" />
                        </div>
                    </div>
                </a>
            </div>
        </div>
        <div class="heroCarousel-slide  heroCarousel-slide--1">
            <div class="heroCarousel-image-wrapper heroCarousel-image-wrapper--sized">
                <a href="https://fordstl.com/champagne-glasses/?_bc_fsnf=1&amp;brand=151">
                    <div class="heroCarousel-image-box" style="width:1920px">
                        <div class="heroCarousel-image-box-padding" style="padding-bottom:100%">
                            <img data-lazy="https://cdn11.bigcommerce.com/s-g3i86bef61/images/stencil/800w/carousel/26/LibbeyHoliday-1920x550.jpg?c=1" alt="Celebrate in Style with Libbey Glassware" title="Celebrate in Style with Libbey Glassware" data-sizes="auto"
                            src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
                            class="lazyload heroCarousel-image"
                            loading="lazy"
                            width="800" height="800" />
                        </div>
                    </div>
                </a>
            </div>
        </div>
        <div class="heroCarousel-slide  heroCarousel-slide--2">
            <div class="heroCarousel-image-wrapper heroCarousel-image-wrapper--sized">
                <a href="https://fordstl.com/content/PDF%27s%20to%20link%20to%20website%20advertisements/Walco%20Crates.pdf">
                    <div class="heroCarousel-image-box" style="width:1920px">
                        <div class="heroCarousel-image-box-padding" style="padding-bottom:100%">
                            <img data-lazy="https://cdn11.bigcommerce.com/s-g3i86bef61/images/stencil/800w/carousel/24/WalcoCrates-1920x550.jpg?c=1" alt="Walco Crate Chafers and Towers" title="Walco Crate Chafers and Towers" data-sizes="auto"
                            src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
                            class="lazyload heroCarousel-image"
                            loading="lazy"
                            width="800" height="800" />
                        </div>
                    </div>
                </a>
            </div>
        </div>
        <div class="heroCarousel-slide  heroCarousel-slide--3">
            <div class="heroCarousel-image-wrapper heroCarousel-image-wrapper--sized">
                <a href="https://fordstl.com/beistle-88257-50-black-tie-new-years-eve-package-for-50/">
                    <div class="heroCarousel-image-box" style="width:1920px">
                        <div class="heroCarousel-image-box-padding" style="padding-bottom:100%">
                            <img data-lazy="https://cdn11.bigcommerce.com/s-g3i86bef61/images/stencil/800w/carousel/23/PartyFavs-1920x550.jpg?c=1" alt="Shop our New Years Eve Party Package" title="Shop our New Years Eve Party Package" data-sizes="auto"
                            src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
                            class="lazyload heroCarousel-image"
                            loading="lazy"
                            width="800" height="800" />
                        </div>
                    </div>
                </a>
            </div>
        </div>
        <div class="heroCarousel-slide  heroCarousel-slide--4">
            <div class="heroCarousel-image-wrapper heroCarousel-image-wrapper--sized">
                <a href="">
                    <div class="heroCarousel-image-box" style="width:1920px">
                        <div class="heroCarousel-image-box-padding" style="padding-bottom:100%">
                            <img data-lazy="https://cdn11.bigcommerce.com/s-g3i86bef61/images/stencil/800w/carousel/27/ChefOfMonth_Dec_1920x550.jpg?c=1" alt="December Chef of the Month" title="December Chef of the Month" data-sizes="auto"
                            src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
                            class="lazyload heroCarousel-image"
                            loading="lazy"
                            width="800" height="800" />
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</section>
<script>
    if (document.readyState === 'complete' && window.jQuerySupermarket) {
        window.jQuerySupermarket('.heroCarousel[data-slick]:not(.slick-initialized').slick();
    }
</script>