光滑的JS反向滑动方向和动画

Question

我在使用Slick JS时遇到问题。我想将滑动方向更改为反向。这是一个较大项目的一部分，该项目将允许用户移动面板，旋转和缩放面板。一切正常，但不幸的是，无论如何，滑块都以相同的方式滑动。

这是一个演示该问题的代码片段（为代码混乱而道歉！）

当您单击翻转按钮时，滑动应沿相反方向进行。

任何帮助将不胜感激！

jQuery(document).ready(function() {
  jQuery('.slick').slick({
    arrows: false,
    infinite: true
  });
});

*,
*:before,
*:after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: sans-serif;
}

.wrapper {
  width: 100%;
  height: 100%;
}

.panel {
  width: 402px;
  height: 202px;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  padding: 20px;
  left: 50px;
  top: 50px;
  background: white;
  border: 1px solid rgba(157, 160, 176, 0.3);
  z-index: 1;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
}

.slide {
  background: #EEE;
  height: 150px;
  padding: 20px;
}

.panel.active {
  z-index: 2;
}

button {
  background: red;
  padding: 10px 20px;
  color: #FFF;
}

.flip {
  transform: rotate(180deg);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<div style="text-align:center;">
  <br />
  <button onclick="flip();">Flip</button>
  <br />
</div>

<div class="wrapper">

  <div class="panel" id="panel-0">
    <div class="slick locked">
      <div class="slide">Slide 1</div>
      <div class="slide">Slide 2</div>
      <div class="slide">Slide 3</div>
    </div>
  </div>

</div>


<script>
  function flip() {
    document.getElementById('panel-0').classList.toggle('flip');
  }
</script>