Slick Slider Contribution

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

by Guilherme Santana

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">
<section class="slider">
    <div>Tranformer</div>
    <div>General</div>
    <div>Ventilation 1</div>
    <div>Ventilation 2</div>
    <div>Rectifier</div>
    <div>XYZ</div>
    <div>ABC</div>
    <div>RFGG</div>
    <div>Conector</div>
    <div>Device XXX</div>
    <div>Device CCC</div>
    <div>Device WWW</div>
    
</section>

SCSS

$c1: #d9edf7;
$c2: #aecbe5;

.slider {
    width:20%;
    border: 1px solid transparent;
    border-radius: 20px;
    border-radius: 4px;
    margin: 30px 50px 50px;
    border-color: #bce8f1;
}

.slick-slide {
    color: black;
    padding: 4px 5px;
    font-size: 12px;
    font-family: "Arial", "Helvetica";
    text-align: left;
}

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

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

.slick-slider {
  margin-top: 35px;
}

.slick-slide {
  opacity: .6;
}

.slick-slide:nth-child(odd) {
     background: $c2;
}
.slick-prev, .slick-next {
  left: 50%;
  transform: translate(-50%, 0) rotate(90deg);
}
.slick-next {
  top: unset;
  bottom: -30px;
}
.slick-prev {
  top: -30px;
}
.slick-center {

  max-width: 100% !important;
  max-height: 100% !important;
  opacity: 1;
}

JavaScript

$(".slider").slick({
    vertical: true,
    centerMode: true,
    slidesToShow: 5,
    slidesToScroll: 3
});