title: slick slider on transition keep structure
body: <p>I am using the slick slider and trying to create a certain design for the actual slider. What I basically need is a structure similar to this:</p>
  
  <pre><code>div             div
      div     div
          div
  </code></pre>
  
  <p>I've been able to get this design working hover when in sliding/transition through it automatically goes to this design</p>
  
  <pre><code>div div div div div
  </code></pre>
  
  <p>Where it goes back to the original design. I would like to know if its possible to keep the top design as it goes transition. Below is my current CSS, HTML and jQuery.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="loop"&gt;
    &lt;div class="product"&gt; Your Content &lt;/div&gt;
    &lt;div class="product"&gt; Your Content &lt;/div&gt;
    &lt;div class="product"&gt; Your Content &lt;/div&gt;
    &lt;div class="product"&gt; Your Content &lt;/div&gt;
    &lt;div class="product"&gt; Your Content &lt;/div&gt;
    &lt;div class="product"&gt; Your Content &lt;/div&gt;
    &lt;div class="product"&gt; Your Content &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.active:first-child {
      margin-top: 10px; }
  
  .test, .slick-active:nth-child(1), .slick-active:nth-child(5) {
      margin-top: 10px; }
  
  .test-2, .slick-active:nth-child(2), .slick-active:nth-child(4) {
      margin-top: 40px; }
  
  .center-test, .slick-active:nth-child(3) {
      margin-top: 70px; }
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>$(document).ready(function () {
  var loop = $(".loop");
  loop.slick({
      slidesToShow: 5,
      sliderPerRow: 1,
      swipeToSlide: true
  });
  loop.on('afterChange', function (event, slick, currentSlide, nextSlide) {
      loop.find(".slick-active").first().addClass("test");
      loop.find(".slick-active").last().addClass("test");
      loop.find(".slick-active").eq(1).addClass("test-2");
      loop.find(".slick-active").eq(3).addClass("test-2");
      loop.find(".slick-active").eq(2).addClass("center-test");
  
  });
  loop.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
      loop.find(".slick-active ").removeClass("test");
      loop.find(".slick-active ").removeClass("test-2");
      loop.find(".slick-active ").removeClass("center-test");
  
  });
  loop.find(".slick-active").removeClass("test");
  loop.find(".slick-active").first().addClass("test");
  loop.find(".slick-active").last().addClass("test");
  loop.find(".slick-active").eq(1).addClass("test-2");
  loop.find(".slick-active").eq(3).addClass("test-2");
  loop.find(".slick-active").eq(2).addClass("center-test");
  });
  </code></pre>
  
  <p>I'm guessing instead of margin there should be some sort of offset, where once the code is sliding each div is being calculated. Here is the documentation for slick slider:
  <a href="http://kenwheeler.github.io/slick/" rel="nofollow">http://kenwheeler.github.io/slick/</a></p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I've also added in this css rather than adding a margin to the divs.</p>
  
  <pre><code>.test, .slick-active:nth-child(1), .slick-active:nth-child(5){
  top:10px;
  position:relative;
  }
  .test-2, .slick-active:nth-child(2), .slick-active:nth-child(4){
  top:40px;
  position:relative;
  }
  .center-test, .slick-active:nth-child(3){
  top:70px;
  position:relative;
  }
  .slick-track{
  height:100px;
  }
  </code></pre>
  
  <p>So far what I have observed is that it adds the class for the structure change after the slide has finished the transition, hence the 'afterChange' in the JS. But would it be possible to get the structure to be applied when the transition is also in place. </p>