Slick Slider Contribution

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

by ian_smithz

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">
</section>
<input type="button" id="triggerSlick" value="Click Me">

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

function createSlick(){  
  var html="";
  for(var i=1;i<=5;i++) {
  html += "<div>slide"+i+"</div>";
  }
  $('.slider').html(html);
	$(".slider").not('.slick-initialized').slick({
    autoplay: true,
    dots: true,
    responsive: [{ 
        breakpoint: 500,
        settings: {
            dots: false,
            arrows: false,
            infinite: false,
            slidesToShow: 2,
            slidesToScroll: 2
        } 
    }]
});	

}

createSlick();

$('#triggerSlick').click(function(e) {
$('.slider').append( "<div>slideExtra</div>" );
$(".slider").slick('refresh');
});