Slick slider horizontal example

by ian_smithz

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<div class="slider">

  <div><img src="http://placehold.it/96.png" alt=""></div>
  <div><img src="http://placehold.it/96.png" alt=""></div>
  <div><img src="http://placehold.it/96.png" alt=""></div>
  <div><img src="http://placehold.it/96.png" alt=""></div>
  <div><img src="http://placehold.it/96.png" alt=""></div>
  <div><img src="http://placehold.it/96.png" alt=""></div>
  <div><img src="http://placehold.it/96.png" alt=""></div>
  <div><img src="http://placehold.it/96.png" alt=""></div>
  <div><img src="http://placehold.it/96.png" alt=""></div>
  <div><img src="http://placehold.it/96.png" alt=""></div>
  <div><img src="http://placehold.it/96.png" alt=""></div>
  <div><img src="http://placehold.it/96.png" alt=""></div>
  <div><img src="http://placehold.it/96.png" alt=""></div>
  <div><img src="http://placehold.it/96.png" alt=""></div>
  <div><img src="http://placehold.it/96.png" alt=""></div>
  <div><img src="http://placehold.it/96.png" alt=""></div>
  <div><img src="http://placehold.it/96.png" alt=""></div>
  <div><img src="http://placehold.it/96.png" alt=""></div>
  <div><img src="http://placehold.it/96.png" alt=""></div>
  <div><img src="http://placehold.it/96.png" alt=""></div>
  <div><img src="http://placehold.it/96.png" alt=""></div>
  <div><img src="http://placehold.it/96.png" alt=""></div>
  <div><img src="http://placehold.it/96.png" alt=""></div>
  <div><img src="http://placehold.it/96.png" alt=""></div>
  <div><img src="http://placehold.it/96.png" alt=""></div>
  <div><img src="http://placehold.it/96.png" alt=""></div>
  <div><img src="http://placehold.it/96.png"...

CSS

.slick-slide img {
  float: left;
  display: inline-block;
  border: 2px solid #fff;
}

JavaScript

$(document).ready(function() {
  // slick carousel
  $('.slider').slick({
    dots: true,
    slidesToShow: 6,
    slidesToScroll: 6
  });
});