Slick Slider With Ember

Issue #1335

by CJ Juarez

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>slide1</div>
    <div>slide2</div>
    <div>slide3</div>
    <div>slide4</div>
    <div>slide5</div>
    <div>slide6</div>
</section>

SCSS

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

.slider {
    width: auto;
    margin: 30px 50px 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;
}

JavaScript

$('.slider').slick({
      centerMode: true,
      centerPadding: '0px',
      slidesToShow: 5,
      slidesToScroll: 1,
      focusOnSelect: true,
      responsive: [
        {
          breakpoint: 1199,
          settings: {
            slidesToShow:4,
            slidesToScroll: 1,
            centerMode: false
          },
        },
        {
          breakpoint: 991,
          settings: {
            slidesToShow:3,
            centerMode: false
          }
        },
        {
          breakpoint: 757,
          settings: {
            slidesToShow:1,
            centerMode: true,
            centerPadding: '40px',
            arrows: false
          }
        },
      ]
    });