Реструктурировать карусельные элементы в DOM

Question

Я пытаюсь повторно обернуть предметы моей карусели через реструктуризацию DOM. Я буду делать это с размером экрана, но не обращайте на это внимания, просто для начала нужно выяснить, как правильно изменять элементы.

В настоящее время на каждом слайде есть несколько изображений, мне нужно, чтобы каждое flex-grid-item было отдельным слайдом с каруселью, поэтому я получаю по 1 изображению на каждом слайде.

Что у меня сейчас:

<slide 1>
 <div class="carousel-item">
    <div class="carousel__flex-grid">
       <div class="flex-grid-item" data-slick-item>1</div>
       <div class="flex-grid-item" data-slick-item>2</div>
    </div>
 </div>
</slide 1>

<slide 2>
 <div class="carousel-item">
    <div class="carousel__flex-grid">
       <div class="flex-grid-item" data-slick-item>3</div>
       <div class="flex-grid-item" data-slick-item>4</div>
       <div class="flex-grid-item" data-slick-item>5</div>
    </div>
 </div>
</slide 2>

Чего я пытаюсь достичь:

<slide 1>
 <div class="carousel-item">
   <div class="flex-grid-item" data-slick-item>1</div>
 </div>
</slide 1>
<slide 2>
 <div class="carousel-item">
   <div class="flex-grid-item" data-slick-item>2</div>
 </div>
</slide 2>
<slide 3>
 <div class="carousel-item">
    <div class="flex-grid-item" data-slick-item>3</div>
 </div>
</slide 3>
<slide 4>
 <div class="carousel-item">
     <div class="flex-grid-item" data-slick-item>4</div>
 </div>
</slide 4>
<slide 5>
 <div class="carousel-item">
    <div class="flex-grid-item" data-slick-item>5</div>
 </div>
</slide 5>

При реструктуризации элементы не нужно оборачивать в <div class="carousel__flex-grid">.

JS Fiddle: https://jsfiddle.net/tr0pec2m/11/

$(function () {
    
    	// Grab all carousels and store
    	var slickCarousels = document.querySelectorAll('[data-slick-me]');
    
    	// Grab all carousels items
    	var slickCarouselItem = document.querySelectorAll('[data-slick-item]');
      
      // Iterate through each
  		$(slickCarousels).each(function() {
        
        $(this).slick({
          dots: true,
          infinite: false,
          slidesToShow: 1,
          slidesToScroll: 1
        });
        
    	});
     
    });

html, body {
      margin: 0;
      padding: 0;
    }

    * {
      box-sizing: border-box;
    }

    .slider {
      width: 50%;
      margin: 25px auto;
    }

    .slick-slide {
      margin: 0px 20px;
    }

      .slick-slide img {
        border: 1px solid #000;
      }

    .slick-prev:before,
    .slick-next:before {
      color: black;
    }

    .hidde-sldie img {
      border: 5px solid red;
    }

    .show-hide-slide-btn {
      text-align: center;
      margin: 0 auto;
      display: block;
    }

<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css" rel="stylesheet"/>
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script>
  <section class="carousel slider" data-slick-me>
    <div class="carousel-item">
      <div class="flex-grid">
        <div class="flex-grid-item" data-slick-item>
          <img src="http://placehold.it/150x100?text=1">
        </div>
        <div class="flex-grid-item" data-slick-item>
          <img src="http://placehold.it/150x100?text=2">
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="flex-grid">
        <div class="flex-grid-item" data-slick-item>
          <img src="http://placehold.it/150x100?text=3">
        </div>
        <div class="flex-grid-item" data-slick-item>
          <img src="http://placehold.it/150x100?text=4">
        </div>
        <div class="flex-grid-item" data-slick-item>
          <img src="http://placehold.it/150x100?text=5">
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="flex-grid">
        <div class="flex-grid-item" data-slick-item>
          <img src="http://placehold.it/150x100?text=6">
        </div>
        <div class="flex-grid-item" data-slick-item>
          <img src="http://placehold.it/150x100?text=7">
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="flex-grid">
        <div class="flex-grid-item" data-slick-item>
          <img src="http://placehold.it/150x100?text=8">
        </div>
        <div class="flex-grid-item" data-slick-item>
          <img src="http://placehold.it/150x100?text=9">
        </div>
        <div class="flex-grid-item" data-slick-item>
          <img src="http://placehold.it/150x100?text=10">
        </div>
      </div>
    </div>
  </section>