slick carousel

by ian_smithz

HTML

<link rel="stylesheet" href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<div class="lg-24 md-24 sm-24">
  <div class="row">
    <h2 class="h2 underline">Top Brands -  <a class="ViewAllLink" href="//screwfix.com/landingpage/atozbrands/">View All</a></h2>
    <div class="sl__full">
      <div class="slider slider-brands">
        <div>
          <div class="mt__item" title="DeWalt" style="background-color: #FFF;">
            <a href="//www.screwfix.com/landingpage/dewalt/" class="cat-link" style="color: #0053a0;" tabindex="0">
              <div class="mt__item-img">
                <img src="//www.screwfix.com/images/general/assets/gfx/brand_glass_pane.png" alt="DeWalt" class="fill">
                <img src="//www.screwfix.com/images/general/assets/gfx/atoz_sprite_brandscroller.png" class="sprite_pos sprite_pos_one">
              </div>
              <div class="mt__item-title brand_block_01">
                <div class="h3">DeWalt</div>
              </div>
            </a>
          </div>
        </div>
        <div>
          <div class="mt__item" title="MK" style="background-color: #FFF;">
            <a href="//www.screwfix.com/landingpage/mk/" class="cat-link" style="color: #0053a0;" tabindex="0">
              <div class="mt__item-img brand_block_02">
                <img src="//www.screwfix.com/images/general/assets/gfx/brand_glass_pane.png" alt="MK" class="fill">
                <img src="//www.screwfix.com/images/general/assets/gfx/atoz_sprite_brandscroller.png" class="sprite_pos sprite_pos_two">
              </div>
              <div class="mt__item-title">
                <div class="h3">MK</div>
              </div>
            </a>
          </div>
        </div>
        <div>
          <div class="mt__item" title="Mira" style="background-color: #FFF;">
            <a href="//www.screwfix.com/landingpage/mira/" class="cat-link"...

CSS

.slider .mt__item-img img {

  max-width: none;

}


.slider-brands .pagi__link.slick-prev, .slider-certona .pagi__link.slick-prev {
    right: 50px;
}

.slider-brands .pagi__link, .slider-certona .pagi__link {
    position: absolute;
    top: -65px;
    right: 6px;
}

@media only screen and (max-width: 64em) {
  .pagi__link:first-of-type {
      margin-left: 0;
  }
}

.pagi__link:first-of-type {
    margin-left: 20px;
}

.pagi__link {
    font-size: 18px;
    padding-left: 4px;
    padding-right: 4px;
}



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




.mt__item-img {
  position: relative;
  overflow: hidden;
}

.sprite_pos {
  min-height: 100%;
  position: absolute;
  top: 0;
  max-height: 100%;
  display: block;
  width: 1800% !important;
}

.sprite_pos_one {
  left: 0;
}

.sprite_pos_two {
  left: -100%;
}

.sprite_pos_three {
  left: -200%;
}

.sprite_pos_four {
  left: -300%;
}

.sprite_pos_five {
  left: -400%;
}

.sprite_pos_six {
  left: -500%;
}

.sprite_pos_seven {
  left: -600%;
}

.sprite_pos_eight {
  left: -700%;
}

.sprite_pos_nine {
  left: -800%;
}

.sprite_pos_ten {
  left: -900%;
}

.sprite_pos_eleven {
  left: -1000%;
}

.sprite_pos_twelve {
  left: -1100%;
}

.sprite_pos_thirteen {
  left: -1200%;
}

.sprite_pos_fourteen {
  left: -1300%;
}

.sprite_pos_fifteen {
  left: -1400%;
}

.sprite_pos_sixteen {
  left: -1500%;
}

.sprite_pos_seventeen {
  left:...

JavaScript

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

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