Slick Slider Contribution

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

by anay1231

HTML

<script src="http://cdn.jsdelivr.net/jquery.slick/latest/slick.min.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/jquery.slick/latest/slick.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/latest/slick-theme.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.1/css/foundation.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.1/js/foundation.min.js"></script>
<!--              ^
    Use the FORK, Luke.
    create your own new fiddle test case.
-->
<ul class="tabs" data-tab>
  <li class="tab-title active"><a href="#panel1">Tab 1</a></li>
  <li class="tab-title"><a href="#panel2">Tab 2</a></li>
</ul>

<div class="tabs-content">
  <div class="content active" id="panel1">
    <section class="slider">
    <div>slide1</div>
    <div>slide2</div>
    <div>slide3</div>
    <div>slide4</div>
    <div>slide5</div>
    <div>slide6</div>
    </section>      
  </div>
  <div class="content" id="panel2">
      <section class="slider">
        <div>slide56</div>
        <div>slide2</div>
        <div>slide3</div>
        <div>slide4</div>
        <div>slide5</div>
        <div>slide6</div>
      </section>
  </div>
</div>

CSS

.slider {

    width: 80%;
    margin: 40px 0 0 10%;

}

.slick-slide {

    background: skyblue;
    color: white;
    padding: 30px;
    font-size: 30px;
    font-family: "Arial";

}

.slick-prev:before, 
.slick-next:before {

    color: black;

}

.slick-slide:nth-child(1),
.slick-slide:nth-child(3),
.slick-slide:nth-child(5),
.slick-slide:nth-child(7),
.slick-slide:nth-child(9),
.slick-slide:nth-child(11) {
     background: teal;
}

JavaScript

/**
    This fiddle is using the latest version 
    of Slick and jQuery.

    If your issue occurs in older version; please 
    use the "External Resources" section 
    in the sidebar.
**/


$(document).foundation();
$(".slider").slick();

$(".tabs").on("toggled", function (event, tab) {
    $(".slider").slick("setPosition");
});