slick carousel a-z -work only on tablet/mob - buttonless

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;
  background: red;
  border-bottom: 1px solid #d1d1d1;
  padding: 33px 10px 25px 10px;
}

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

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

.slider-az {
  text-align: center;
  background: #f5dfad;
}

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

.slider-az div {
  position: relative;
}

.slider-az div:after {
  content: '';
  height: 50%;
  width: 1px;
  position: absolute;
  right: 0;
  top: 20%;
  background-color: #636363;
}

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

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

.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;
}

.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 {
  top: 0;
  right: -49px;
}

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

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

 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: 14,
       slidesToScroll: 14
     }
   }, {
     breakpoint: 768,
     settings: {
       slidesToShow: 10,
       slidesToScroll: 10
     }
   }, {
     breakpoint: 375,
     settings: {
       slidesToShow: 4,
       slidesToScroll: 4
     }
   }]
 }

 if ($(window).innerWidth() < 1024) {
   $slick_slider.slick(settings);
 }

 $(window).on('resize', function() {

   if ($(window).innerWidth() > 1024) {

     if ($slick_slider.hasClass('slick-initialized')) {
       $slick_slider.slick('unslick');
     }
     return
   }

   if (!$slick_slider.hasClass('slick-initialized')) {

     return $slick_slider.slick(settings);

   }
 });

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