Carousel Slick Not working on Nested Elements - Adobe Experience Manager

Question

I am trying to use the slick carousel on nested elements on a cms system. I cant necessarily edit the code, but add classes to the boxes. I have added the cdn links for Jquery and etc, but on my cms it only renders as one slide.

I would like to have 3 boxes per slide.

I have tried putting the boxes inside of another box and specify that it was supposed to be a slide. but it did not work. Instead of rendering multiple slides, only one renders.

$(document).ready(function() {
  $('.carousel-test').slick({
    slidesToShow: 3,
    slidesToScroll: 3,
    dots: true,
    infinite: true,
    autoplay: false,
    speed: 300,
    arrows: true,
    adaptiveHeight: true
  });
});

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

<div class="box component section bg--aqua-400 carousel-test odd last col-xs-12 slick-initialized slick-slider slick-dotted">
  <div class="component-content" id="01583055887">
    <div class="paragraphSystem content">
      <a id="2121559131" style="visibility:hidden" aria-hidden="true"></a>
      <div class="box component section slide-test bg--purple-600 first odd col-xs-12">
        <div class="component-content" id="460825111">
          <div class="paragraphSystem content">
            <a id="01612051327" style="visibility:hidden" aria-hidden="true"></a>
            <div class="box component section bg--white first odd col-xs-12 col-lg-12">
              <div class="component-content" id="0715037961">
                <div class="paragraphSystem content">
                  <a id="1878322529" style="visibility:hidden" aria-hidden="true"></a>
                  <div class="image component section default-style first odd col-xs-12">
                    <div class="component-content left">
                      <div class="analytics-image-tracking"></div>
                      <picture>
                        <!--[if IE 9]><video style="display: none;"><![endif]-->
                        <img src="/imageTest.jpg" alt="" width="400" height="200">
                      </picture>
                    </div>
                  </div>
                  <div class="richText component section default-style even col-xs-12">
                    <div class="component-content">
                      <div class="richText-content">
                        <p>Here are nine common ingredients you'll find in facial cleansing oil, why they're there, and how they can benefit you and your family.</p>
                      </div>
                    </div>
                  </div>
                  <div class="parametrizedhtml component section default-style odd col-xs-12 reference-vertical-spacer">
                    <div class="component-content">
                      <div class="vertical-spacer" data-hide-indicator="false">
                        <div class="lg"></div>
                        <div class="md"></div>
                        <div class="sm" style="height: 40px"></div>
                        <div class="xs" style="height: 30px"></div>
                      </div>
                    </div>
                  </div>
                  <div class="richText component section container-redesign-primary-button even last col-xs-12">
                    <div class="component-content">
                      <div class="richText-content">
                        <p><a href="#"> Read more </a></p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="box component section bg--white even col-xs-12 col-lg-12 col-lg-offset-0">
              <div class="component-content" id="01440760734">
                <div class="paragraphSystem content">
                  <a id="1776593868" style="visibility:hidden" aria-hidden="true"></a>
                  <div class="image component section default-style first odd col-xs-12">
                    <div class="component-content left">
                      <div class="analytics-image-tracking"></div>
                      <picture>
                        <!--[if IE 9]><video style="display: none;"><![endif]-->
                        <img src="/imageTest.jpg" alt="" width="400" height="200">
                      </picture>
                    </div>
                  </div>
                  <div class="richText component section default-style even col-xs-12">
                    <div class="component-content">
                      <div class="richText-content">
                        <p>Here are nine common ingredients you'll find in facial cleansing oil, why they're there, and how they can benefit you and your family.</p>
                      </div>
                    </div>
                  </div>
                  <div class="parametrizedhtml component section default-style odd col-xs-12 reference-vertical-spacer">
                    <div class="component-content">
                      <div class="vertical-spacer" data-hide-indicator="false">
                        <div class="lg"></div>
                        <div class="md"></div>
                        <div class="sm" style="height: 40px"></div>
                        <div class="xs" style="height: 30px"></div>
                      </div>
                    </div>
                  </div>
                  <div class="richText component section container-redesign-primary-button even last col-xs-12">
                    <div class="component-content">
                      <div class="richText-content">
                        <p><a href="#"> Read more </a></p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="box component section bg--white odd last col-xs-12 col-lg-12 col-lg-offset-0">
              <div class="component-content" id="01389191491">
                <div class="paragraphSystem content">
                  <a id="1497957159" style="visibility:hidden" aria-hidden="true"></a>
                  <div class="image component section default-style first odd col-xs-12">
                    <div class="component-content left">
                      <div class="analytics-image-tracking"></div>
                      <picture>
                        <!--[if IE 9]><video style="display: none;"><![endif]-->
                        <img src="/imageTest.jpg" alt="" width="400" height="200">
                      </picture>
                    </div>
                  </div>
                  <div class="richText component section default-style even col-xs-12">
                    <div class="component-content">
                      <div class="richText-content">
                        <p>Here are nine common ingredients you'll find in facial cleansing oil, why they're there, and how they can benefit you and your family.</p>
                      </div>
                    </div>
                  </div>
                  <div class="parametrizedhtml component section default-style odd col-xs-12 reference-vertical-spacer">
                    <div class="component-content">
                      <div class="vertical-spacer" data-hide-indicator="false">
                        <div class="lg"></div>
                        <div class="md"></div>
                        <div class="sm" style="height: 40px"></div>
                        <div class="xs" style="height: 30px"></div>
                      </div>
                    </div>
                  </div>
                  <div class="richText component section container-redesign-primary-button even last col-xs-12">
                    <div class="component-content">
                      <div class="richText-content">
                        <p><a href="#"> Read more </a></p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="box component section bg--pink-600 slide-test even last col-xs-12">
        <div class="component-content" id="346455197">
          <div class="paragraphSystem content">
            <a id="1836122375" style="visibility:hidden" aria-hidden="true"></a>
            <div class="box component section bg--white first odd col-xs-12 col-lg-3">
              <div class="component-content" id="01658575695">
                <div class="paragraphSystem content">
                  <a id="01491118821" style="visibility:hidden" aria-hidden="true"></a>
                  <div class="image component section default-style first odd col-xs-12">
                    <div class="component-content left">
                      <div class="analytics-image-tracking"></div>
                      <picture>
                        <!--[if IE 9]><video style="display: none;"><![endif]-->
                        <img src="/imageTest.jpg" alt="" width="400" height="200">
                      </picture>
                    </div>
                  </div>
                  <div class="richText component section default-style even col-xs-12">
                    <div class="component-content">
                      <div class="richText-content">
                        <p>Here are nine common ingredients you'll find in facial cleansing oil, why they're there, and how they can benefit you and your family.</p>
                      </div>
                    </div>
                  </div>
                  <div class="parametrizedhtml component section default-style odd col-xs-12 reference-vertical-spacer">
                    <div class="component-content">
                      <div class="vertical-spacer" data-hide-indicator="false">
                        <div class="lg"></div>
                        <div class="md"></div>
                        <div class="sm" style="height: 40px"></div>
                        <div class="xs" style="height: 30px"></div>
                      </div>
                    </div>
                  </div>
                  <div class="richText component section container-redesign-primary-button even last col-xs-12">
                    <div class="component-content">
                      <div class="richText-content">
                        <p><a href="#"> Read more </a></p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="box component section bg--white even col-xs-12 col-lg-3 col-lg-offset-1">
              <div class="component-content" id="01942423652">
                <div class="paragraphSystem content">
                  <a id="02146169594" style="visibility:hidden" aria-hidden="true"></a>
                  <div class="image component section default-style first odd col-xs-12">
                    <div class="component-content left">
                      <div class="analytics-image-tracking"></div>
                      <picture>
                        <!--[if IE 9]><video style="display: none;"><![endif]-->
                        <img src="/imageTest.jpg" alt="" width="400" height="200">
                      </picture>
                    </div>
                  </div>
                  <div class="richText component section default-style even col-xs-12">
                    <div class="component-content">
                      <div class="richText-content">
                        <p>Here are nine common ingredients you'll find in facial cleansing oil, why they're there, and how they can benefit you and your family.</p>
                      </div>
                    </div>
                  </div>
                  <div class="parametrizedhtml component section default-style odd col-xs-12 reference-vertical-spacer">
                    <div class="component-content">
                      <div class="vertical-spacer" data-hide-indicator="false">
                        <div class="lg"></div>
                        <div class="md"></div>
                        <div class="sm" style="height: 40px"></div>
                        <div class="xs" style="height: 30px"></div>
                      </div>
                    </div>
                  </div>
                  <div class="richText component section container-redesign-primary-button even last col-xs-12">
                    <div class="component-content">
                      <div class="richText-content">
                        <p><a href="#"> Read more </a></p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="box component section bg--white odd last col-xs-12 col-lg-3 col-lg-offset-1">
              <div class="component-content" id="01890854409">
                <div class="paragraphSystem content">
                  <a id="1870160993" style="visibility:hidden" aria-hidden="true"></a>
                  <div class="image component section default-style first odd col-xs-12">
                    <div class="component-content left">
                      <div class="analytics-image-tracking"></div>
                      <picture>
                        <!--[if IE 9]><video style="display: none;"><![endif]-->
                        <source srcset="/content/dam/cp-sites/container/container-of-maine/global/image-gallery/body-lip-downloads/natural-beauty-bar/container-natural-beauty-bar-fresh-eucalyptus.jpg.rendition.1280.1280.jpg" media="(min-width: 0px) and (max-width: 767px)">
                        <source srcset="/content/dam/cp-sites/container/container-of-maine/global/image-gallery/body-lip-downloads/natural-beauty-bar/container-natural-beauty-bar-fresh-eucalyptus.jpg.rendition.1280.1280.jpg" media="(min-width: 768px) and (max-width: 991px)">
                        <!--[if IE 9]></video><![endif]-->
                        <img src="/imageTest.jpg" alt="" width="400" height="200">
                      </picture>
                    </div>
                  </div>
                  <div class="richText component section default-style even col-xs-12">
                    <div class="component-content">
                      <div class="richText-content">
                        <p>Here are nine common ingredients you'll find in facial cleansing oil, why they're there, and how they can benefit you and your family.</p>
                      </div>
                    </div>
                  </div>
                  <div class="parametrizedhtml component section default-style odd col-xs-12 reference-vertical-spacer">
                    <div class="component-content">
                      <div class="vertical-spacer" data-hide-indicator="false">
                        <div class="lg"></div>
                        <div class="md"></div>
                        <div class="sm" style="height: 40px"></div>
                        <div class="xs" style="height: 30px"></div>
                      </div>
                    </div>
                  </div>
                  <div class="richText component section container-redesign-primary-button even last col-xs-12">
                    <div class="component-content">
                      <div class="richText-content">
                        <p><a href="#"> Read more </a></p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>