Slick Slider Contribution

A Base fiddle for use in the issue section of github https://github.com/kenwheeler/slick/issues

HTML

<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script>
<link rel="stylesheet" href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css">
<link rel="stylesheet" href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css">
<div class="container">
  <div class="fullWidth slider">
    <span>Desktop</span>
    <ul class="fullslider">
      <li class="slide">
        <div class="single-product"><img src="http://placekitten.com/400/400"></div>
        <div class="single-product"><img src="http://placekitten.com/400/400"></div>
        <div class="single-product"><img src="http://placekitten.com/400/400"></div>
        <div class="single-product"><img src="http://placekitten.com/400/400"></div>
        <div class="single-product"><img src="http://placekitten.com/400/400"></div>
        <div class="single-product"><img src="http://placekitten.com/400/400"></div>
        <div class="single-product"><img src="http://placekitten.com/400/400"></div>
        <div class="single-product"><img src="http://placekitten.com/400/400"></div>
      </li>
      <li class="slide">
        <div class="single-product"><img src="http://placekitten.com/400/400"></div>
        <div class="single-product"><img src="http://placekitten.com/400/400"></div>
        <div class="single-product"><img src="http://placekitten.com/400/400"></div>
        <div class="single-product"><img src="http://placekitten.com/400/400"></div>
        <div class="single-product"><img src="http://placekitten.com/400/400"></div>
        <div class="single-product"><img src="http://placekitten.com/400/400"></div>
        <div class="single-product"><img src="http://placekitten.com/400/400"></div>
        <div class="single-product"><img src="http://placekitten.com/400/400"></div>
      </li>
      <li class="slide">
        <div class="single-product"><img src="http://placekitten.com/400/400"></div>
        <div class="single-product"><img...

SCSS

span {
  font-weight: bold;
  font-size: 20px;
  text-transform: uppercase;
  font-family: Sans-Serif;
}
.container {
  max-width: 300px;
  margin: 0 auto;
}
.single-product {
  margin-bottom: 10px;
}
.fullWidth .single-product {
  float: left;
  width: 25%;
}
.mediumWidth .single-product {
  float: left;
  width: 33.3333%;
}
.smallWidth .single-product {
  float: left;
  width: 50%;
}
img {
  max-width: 100%;
  height: auto;
}
.medSlider, .fullslider, .mobileSlider {
    width: 90%;
    margin: 15px 50px;
}

.slick-slide {
    color: white;
    font-size: 30px;
    font-family: "Arial", "Helvetica";
    text-align: center;
}

.slick-prev:before, 
.slick-next:before {
    color: black;    
}

.slick-dots {
    bottom: -30px;
}

JavaScript

$(".fullslider").slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  autoplay: true,
  dots: true
});

$(".medSlider").slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  autoplay: true,
  dots: true
});

$(".mobileSlider").slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  autoplay: true,
  dots: true
});