Multi-card layout becomes slider on mobile

Stop suffering from scroll-heavy mobile pages. This small script engages Slick Slider on mobile viewports to condense sibling content into one short slider, meaning content near the footer actually has a chance of actually being seen.

Adidas Black Future Samba

Nike Air Jordan 5 Take Flight

Nike Air Max 90 SE

adidas adiZero adios 3

View at mobile viewport to see the slider take effect.

Implementation notes

Last updated: 1/27/2004

Step 1 - Creating the collection & building the UI

For this project, we'll create a collection with some basic information about shoes, then display the collection on a static page.

Step 2 - Applying the appropriate class to the Collection List div

The Mobile Slides class will apply the mobile Slick Slider behavior to a given collection list.

Step 3 - Include the Slick Slider CSS

The following code will need to be added to the page's <Head>. The inline CSS can be customized to match the project's look & feel.

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/@accessible360/accessible-slick@1.0.1/slick/slick.min.css">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/@accessible360/accessible-slick@1.0.1/slick/slick-theme.min.css">

<style>
.slick-dots {
  display: block;
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
  margin: 0;
  bottom: 10px;
  list-style: none;
}
.slick-dots li {
  display: inline-block;
  margin-right: 10px;
}
.slick-dots li button {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  text-indent: -999999px;
}
.slick-dots li.slick-active button {
  background-color: #db2323;
}

@media only screen and (max-width: 767px) {
  .mobile-slides {
  	padding-bottom: 60px;
  }
}
</style>

Step 4 - Include the Slick Slider Javascript

The following Javascript will need to be added at the end of the page's <Body>.

<script type="text/javascript" src="//cdn.jsdelivr.net/npm/@accessible360/accessible-slick@1.0.1/slick/slick.min.js"></script>

<script id="rendered-js" >
  mobileOnlySlider(".mobile-slides", true, false, 767);

  function mobileOnlySlider($slidername, $dots, $arrows, $breakpoint) {
    var slider = $($slidername);
    var settings = {
      mobileFirst: true,
      dots: $dots,
      arrows: $arrows,
      responsive: [
      {
        breakpoint: $breakpoint,
        settings: "unslick" }] };

    slider.slick(settings);

    $(window).on("resize", function () {
      if ($(window).width() > $breakpoint) {
        return;
      }
      if (!slider.hasClass("slick-initialized")) {
        return slider.slick(settings);
      }
    });
  }
</script>