Homescreen: Logo Crawl

To add a Logo Crawl:

1. Add the following links to your header 

<link rel="stylesheet" type="text/css" href="https://adamk-test-bucket.s3.amazonaws.com/slick-1.8.1/slick/slick.css"/ data-attribute="advanced">
<link rel="stylesheet" type="text/css" href="https://adamk-test-bucket.s3.amazonaws.com/slick-1.8.1/slick/slick-theme.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

2. Add html block to homescreen builder with the following html: 

<div class="sponsorLogoWrapper col-xs-12">
    <div class="logoCrawl col-xs-12" id="logoCrawl">

        <div>  <!-- Beginning of single logo slide -->
            <div class="sponsorLogo">
                <a href="">
                    <img src="">
                </a>
            </div>
        </div>  <!-- End of single logo slide -->

    </div>
</div>

3. Copy and paste the "single unit" marked in the comment as many times as needed, updating the link and image src as needed.

4. Add below script beneath your html

<script>
    $('#logoCrawl').slick(
    {
        slidesToShow: 3,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 0,
        speed: 7000,
        arrows: false,
        cssEase: 'linear',
    });
</script>

* Notes:

If "slidesToShow" is less than the total amount of logos in your logo crawl you may see some weird behaviour. 

Additional documentation on how the logo crawl script works is available here: http://kenwheeler.github.io/slick/

5. Add CSS to global styles or WAD

/*---------Logo Crawl-----------*/
.sponsorLogoWrapper {
  padding: 10px 0 0 0;
  flex-direction: column;
  margin-top: 0px;
}

.logoCrawl .sponsorLogo {
  flex: 1 1 100%;
  align-items: center;
  display: flex;
  justify-content: center;
  transform: scale(.8);
  transition: transform 0.3s;
}
.sponsorLogo:hover {
  transform: scale(1);
  transition: transform 0.3s;
}
.sponsorLogoWrapper a,
.sponsorLogoWrapper img {
  width: 100%;
  max-width: 400px;
  transition: 500ms ease transform;
}

.logoCrawl .slick-slide {
  display: flex !important;
  justify-content: center;
  align-items: center;
  margin: 0 20px;
}
.logoCrawl .slick-track,
.logoCrawl .slick-list {
  height: 100%;
}
.logoCrawl {
  height: 200px;
  padding:0px;
}
.logoCrawl .sponsorLogo img {
  max-height: 200px;
  object-fit: contain;
}