slick carousel a-z - v4

by ian_smithz

HTML

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

          <div><a href="//www.screwfix.com/brands/a" class="btn">A</a></div>
          <div><a href="//www.screwfix.com/brands/b" class="btn">B</a></div>
          <div><a href="//www.screwfix.com/brands/c" class="btn">C</a></div>
          <div><a href="//www.screwfix.com/brands/d" class="btn">D</a></div>
          <div><a href="//www.screwfix.com/brands/e" class="btn">E</a></div>
          <div><a href="//www.screwfix.com/brands/f" class="btn">F</a></div>
          <div><a href="//www.screwfix.com/brands/g" class="btn">G</a></div>
          <div><a href="//www.screwfix.com/brands/h" class="btn">H</a></div>
          <div><a href="//www.screwfix.com/brands/i" class="btn">I</a></div>
          <div><a href="//www.screwfix.com/brands/j" class="btn">J</a></div>
          <div><a href="//www.screwfix.com/brands/k" class="btn">K</a></div>
          <div><a href="//www.screwfix.com/brands/l" class="btn">L</a></div>
          <div><a href="//www.screwfix.com/brands/m" class="btn">M</a></div>
          <div><a href="//www.screwfix.com/brands/n" class="btn">N</a></div>
          <div><a href="//www.screwfix.com/brands/o" class="btn">O</a></div>
          <div><a href="//www.screwfix.com/brands/p" class="btn">P</a></div>
          <div><a href="//www.screwfix.com/brands/q" class="btn">Q</a></div>
          <div><a href="//www.screwfix.com/brands/r" class="btn">R</a></div>
          <div><a href="//www.screwfix.com/brands/s" class="btn">S</a></div>
          <div><a href="//www.screwfix.com/brands/t" class="btn">T</a></div>
          <div><a href="//www.screwfix.com/brands/u" class="btn">U</a></div>
          <div><a href="//www.screwfix.com/brands/v" class="btn">V</a></div>
         ...

CSS

.slider-az-container {
  /*width: 100%;*/
  position: relative;
  cursor: pointer;
  border-bottom: 1px solid #d1d1d1;
  padding: 33px 10px 25px 10px;
  margin: 0 36px;
}

.slider-az-container.alt-pos {
  border-top: 1px solid #d1d1d1;
  border-bottom: 0;	
  padding-top: 25px;
  padding-bottom: 33px;		
}

.slider-az-container:after {
  clear: both;
}

@media only screen and (max-width: 1024px) {
  .slider-az-container {
    padding: 33px 50px 25px 40px;
    margin: 0 15px;
  }
}

.slider-az {
  text-align: center;
}

.slider-az:after {
  clear: both;
}

.slider-az div {
  position: relative;
}

.slider-az .slick-slide:after {
  content: '';
  height: 45%;
  width: 1px;
  position: absolute;
  right: 0;
  top: 22%;
  background-color: #636363;
}

.slider-az .slick-slide:last-child:after {
  width: 0;
}

@media only screen and (min-width: 1025px) {
  .slider-az div {
    display: inline-block;
    /*float: left;*/
  }
}

.slider-az .btn {
  font-size: 16px;
  font-weight: bold;
  width: 26px;
  position: relative;
  display: inline-block;
  padding: 7px 0 5px;
  margin: 0 4px 0 3px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #636363;
  line-height: 100%;
  vertical-align: text-bottom;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
  overflow: hidden;
}

@media only screen and (max-width: 1024px) {
  .slider-az .btn {
    margin: 0;
  }
}

.slider-az .btn.selected {
  background-color: #0053a0;
  border: 1px solid #0053a0;
  color: #fff;
}

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

.slider-az .btn.slick-nav-btn {
  position: absolute;
  width: 36px;
  padding: 3px 4px 8px 4px;
  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;
}

.slider-az .slick-next {
 ...

JavaScript

$(document).ready(function() {

  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>';

  var $slick_slider = $('.slider-az');

  var settings = {
    dots: false,
    //focusOnSelect: true,
    draggable: true,
    prevArrow: prevArrow,
    nextArrow: nextArrow,
    slidesToShow: 27,
    slidesToScroll: 27,
    responsive: [{
      breakpoint: 1024,
      settings: {
        slidesToShow: 15,
        slidesToScroll: 15
      }
    }, {
      breakpoint: 768,
      settings: {
        slidesToShow: 10,
        slidesToScroll: 10
      }
    }, {
      breakpoint: 375,
      settings: {
        slidesToShow: 4,
        slidesToScroll: 4
      }
    }]
  }

  $slick_slider.slick(settings);

  $('.slider-az .btn').on('click', function() {
    $('.slider-az .btn').removeClass('selected');
    $(this).addClass('selected');
  });

  $(window).resize(function() {
    $slick_slider.slick('slickGoTo', 0);
  });

});