Как обьеденить Responsive Accordion Tabs(Foundation) + slick carousel?

$(document).foundation(); 
enquire.register("screen and (min-width:640px)", { 
 
  match: function() { 
    $('.js-tabs-slider').slick({ 
      dots: false, 
      infinite: false, 
      speed: 300, 
      slidesToShow: 4, 
      slidesToScroll: 4, 
      nextArrow: '.js-next-arrow', 
      prevArrow: '.js-prev-arrow', 
      responsive: [{ 
        breakpoint: 1024, 
        settings: { 
          slidesToShow: 3, 
          slidesToScroll: 3, 
          infinite: true, 
          dots: true 
        } 
      }, { 
        breakpoint: 640, 
        settings: "unslick" 
      }] 
    }); 
  }, 
});

.tabs-nav { 
  display: flex; 
  position: relative; 
  justify-content: center; 
} 
 
.tabs { 
  width: 80%; 
  flex-basis: 80%; 
} 
 
.slider-arrow { 
  display: none; 
  position: absolute; 
  top: 2px; 
  height: 100%; 
  color: black; 
  cursor: pointer; 
  transition: all 0.2s; 
  } 
  .slider-arrow:hover { 
    color: blue; 
  } 
  .slider-arrow{ 
    font-size: 18px; 
  } 
  .slider-arrow__prev { 
    left: 10px; 
  } 
 .slider-arrow__next { 
    right: 10px; 
  } 
  .slider-arrow.slick-disabled { 
    opacity: 0; 
    visibility: hidden; 
  } 
 
.tabs-slider .slider-arrow { 
  display: inline-block; 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" rel="stylesheet"/> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" rel="stylesheet"/> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css" rel="stylesheet"/> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/enquire.js/2.1.6/enquire.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js"></script> 
 
 
<div class="grid-x"> 
  <div class="cell medium-6 medium-offset-3"> 
 
    <div class="tabs-nav"> 
      <button type="button" class="js-prev-arrow slider-arrow slider-arrow__prev"> 
          <p>Prev</p> 
        </button> 
      <ul class="tabs js-tabs-slider" data-responsive-accordion-tabs="tabs small-accordion medium-tabs" id="example-tabs"> 
        <li class="tabs-title is-active"> 
          <a href="#panel1" aria-selected="true">Tab 1</a> 
        </li> 
        <li class="tabs-title"> 
          <a href="#panel2">Tab 2</a> 
        </li> 
        <li class="tabs-title"> 
          <a href="#panel3">Tab 3</a> 
        </li> 
        <li class="tabs-title"> 
          <a href="#panel4">Tab 4</a> 
        </li> 
        <li class="tabs-title"> 
          <a href="#panel5">Tab 5</a> 
        </li> 
        <li class="tabs-title"> 
          <a href="#panel6">Tab 6</a> 
        </li> 
      </ul> 
      <button type="button" class="js-next-arrow slider-arrow  slider-arrow__next"> 
          <p>next</p> 
        </button> 
    </div> 
 
    <div class="tabs-content" data-tabs-content="example-tabs"> 
      <div class="tabs-panel is-active" id="panel1"> 
        <p>one</p> 
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed at, nam, adipisci quod fuga, laboriosam laudantium aliquam dolor ullam ab ad fugiat? Placeat est culpa alias similique modi inventore accusamus?</p> 
      </div> 
      <div class="tabs-panel" id="panel2"> 
        <p>two</p> 
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed at, nam, adipisci quod fuga, laboriosam laudantium aliquam dolor ullam ab ad fugiat? Placeat est culpa alias similique modi inventore accusamus?</p> 
      </div> 
      <div class="tabs-panel" id="panel3"> 
        <p>three</p> 
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed at, nam, adipisci quod fuga, laboriosam laudantium aliquam dolor ullam ab ad fugiat? Placeat est culpa alias similique modi inventore accusamus?</p> 
      </div> 
      <div class="tabs-panel" id="panel4"> 
        <p>four</p> 
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed at, nam, adipisci quod fuga, laboriosam laudantium aliquam dolor ullam ab ad fugiat? Placeat est culpa alias similique modi inventore accusamus?</p> 
      </div> 
      <div class="tabs-panel" id="panel5"> 
        <p>five</p> 
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed at, nam, adipisci quod fuga, laboriosam laudantium aliquam dolor ullam ab ad fugiat? Placeat est culpa alias similique modi inventore accusamus?</p> 
      </div> 
      <div class="tabs-panel" id="panel6"> 
        <p>six</p> 
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed at, nam, adipisci quod fuga, laboriosam laudantium aliquam dolor ullam ab ad fugiat? Placeat est culpa alias similique modi inventore accusamus?</p> 
      </div> 
    </div> 
 
  </div> 
</div>