slick carousel a-z

by ian_smithz

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<div class="row">
  <div class="lg-24 md-24 sm-24">
    <div class="slider-az-container">

      <div class="slider slider-az">

        <div>
          <a href="//www.screwfix.com/brands/a">
            <button type="button" class="btn" title="A">A</button>
          </a>
        </div>

        <div>
          <a href="//www.screwfix.com/brands/b">
            <button type="button" class="btn" title="B">B</button>
          </a>
        </div>

        <div>
          <a href="//www.screwfix.com/brands/c">
            <button type="button" class="btn" title="C">C</button>
          </a>
        </div>

        <div>
          <a href="//www.screwfix.com/brands/d">
            <button type="button" class="btn" title="D">D</button>
          </a>
        </div>

        <div>
          <a href="//www.screwfix.com/brands/e">
            <button type="button" class="btn" title="E">E</button>
          </a>
        </div>

        <div>
          <a href="//www.screwfix.com/brands/f">
            <button type="button" class="btn" title="F">F</button>
          </a>
        </div>

        <div>
          <a href="//www.screwfix.com/brands/g">
            <button type="button" class="btn" title="G">G</button>
          </a>
        </div>

        <div>
          <a href="//www.screwfix.com/brands/h">
            <button type="button" class="btn" title="H">H</button>
          </a>
        </div>

        <div>
          <a href="//www.screwfix.com/brands/i">
            <button type="button" class="btn" title="I">I</button>
          </a>
        </div>

        <div>
          <a href="//www.screwfix.com/brands/j">
            <button type="button" class="btn" title="J">J</button>
          </a>
        </div>

        <div>
          <a href="//www.screwfix.com/brands/k">
            <button type="button" class="btn" title="K">K</button>
          </a>
        </div>

...

CSS

.slider-az-container {
    max-width: 400px;
    position: relative;
    margin: 40px auto 30px;
    cursor: pointer;
    background: red;
}

.slider-az .btn {
  font-size: 18px;
  padding-left: 2px;
  padding-right: 2px;
  width: 2em;
}

.slider-az .slick-slide {
  padding: 0;
}

.slider-az .slick-nav-btn {
    position: absolute;
    width: 36px;
    padding: 6px 4px 8px 4px;
}

.slider-az .slick-next {
    top: 0;
    right: -45px;
}

.slider-az .slick-prev {
    top: 0;
    left: -50px;
}

.slider-az .slick-next .icon-right-dir {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 9px;
  border-color: transparent transparent transparent #636363;
  font-size: 0;
}

.slider-az .slick-prev .icon-left-dir {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 9px 5px 0;
  border-color: transparent #636363 transparent transparent;
  font-size: 0;
}



.btn {
  position: relative;
  display: inline-block;
  padding: 10px 24px 8px;
  background: #f6f6f6;
  background-image: -webkit-linear-gradient(top, #fcfcfc 0, #f6f6f6 50%, #f0f0f0 50%, #e7e7e7 100%);
  background-image: linear-gradient(to bottom, #fcfcfc 0, #f6f6f6 50%, #f0f0f0 50%, #e7e7e7 100%);
  border: 1px solid #d1d1d1;
  border-radius: 5px;
  color: #636363;
  font-family: archivo_narrowbold, sans-serif;
  font-size: 18px;
  line-height: 100%;
  vertical-align: text-bottom;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
  overflow: hidden;
}



.slick-list,
.slick-slider,
.slick-track,
.slider-az {
  position: relative
}

.slick-slider {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent
}

.slick-slider.slick-list,
.slick-slider.slick-track {
 ...

JavaScript

var prevArrow = '<button id="slider_previous" type="button" data-role="none" class="btn slick-nav-btn slick-prev"><span class="icon-left-dir"></span></button>';
    var nextArrow = '<button id="slider_next" type="button" data-role="none" class="btn slick-nav-btn slick-next"><span class="icon-right-dir"></span></button>';

    $('.slider-az').slick({
      dots: false,
      focusOnSelect: true,
      draggable: true,
      prevArrow: prevArrow,
      nextArrow: nextArrow,
      slidesToShow: 9,
      slidesToScroll: 9,
      responsive: [{
        breakpoint: 1024,
        settings: {
          //slidesToShow: 4,
          //slidesToScroll: 4
        }
      }, {
        breakpoint: 768,
        settings: {
          //slidesToShow: 3,
          //slidesToScroll: 3
        }
      }, {
        breakpoint: 640,
        settings: {
          //slidesToShow: 2,
          //slidesToScroll: 2
        }
      }]
    });