Slick Slider Contribution

A Base fiddle for use in the issue section of github https://github.com/kenwheeler/slick/issues

by gRoberts

HTML

<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script>
<link rel="stylesheet" href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css">
<link rel="stylesheet" href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css">
<!--              ^
    Use the FORK, Luke.
    create your own new fiddle test case.
-->

<section class="slider">
    <div class="my-slide">slide1</div>
    <div class="my-slide">slide2</div>
    <div class="my-slide">slide3</div>
    <div class="my-slide">slide4</div>
    <div class="my-slide">slide5</div>
    <div class="my-slide">slide6</div>
</section>

SCSS

$c1: #3a8999;
$c2: #e84a69;

.slider {
    width: auto;
    margin: 30px 0 50px;
}

.slick-slide {
    background: $c1;
    color: white;
    padding: 40px 0;
    font-size: 30px;
    font-family: "Arial", "Helvetica";
    text-align: center;
}

.slick-prev:before, 
.slick-next:before {
    color: black;    
}

.slick-dots {
    bottom: -30px;
}

.slick-slide:nth-child(odd) {
     background: $c2;
}

.slick-slide {
  transition: width 100ms linear;
  &.active {
    background: yellow !important;
    width: 80vw !important;
  }
  &.sibling-active {
    background: pink !important;
    width: 10vw !important;
  }
}


.slick-track{
    display: flex;

    .slick-slide{
        display: flex;
        height: auto;
        align-items: center;
        justify-content: center;
    }
}

JavaScript

/**

    This fiddle is using the latest version 
    of Slick (from master) and jQuery.

    If your issue occurs in older version or a 
    specific tag; please use the "External Resources" 
    section in the sidebar to correct it.

**/


$(".slider").slick({
    autoplay: false,
    dots: true,
    arrows: false,
    slidesToShow: 3
}).on('beforeChange reInit', function() {
	$(this).find('.slick-slide').removeClass('active sibling-active');
});

$(document).on('click', '.slick-slide', function(e) {
	e.preventDefault();
  
  var par = $(this).closest('.slick-track'),
  		slides = par.find('.slick-slide'),
      current = $(this),
      active = slides.filter('.slick-active');
      
  slides.removeClass('active sibling-active');
  active.not(current).addClass('sibling-active');
  current.addClass('active');
  
});