Slider only being created in the DOM below ~750px breakpoint

[tbeckman1234]

I can see the slider being created in the DOM only when screen size goes below about a 750px breakpoint.

Above this level, the .a11y-slider is not being created and is being removed if it is present in the DOM.

This is my implementation:

HTML:

<section class="carousel | padding-block-900 text-center">
        <h2 class="fs-secondary-heading fw-bold">What they've said</h2>
        <!--Carousel here-->
        <ul class="slider">
          <li>
            <img src="images/avatar-anisha.png" alt="">
            <div class="slider-content | flow" style="--flow-spacer: 1rem">
              <h3 class="fw-bold">Anisha Li</h3>
              <p data-width="wide">"Manage has supercharged our team's workflow. The ability to maintain visiblity on larger milestones at all times keeps everyone motivated."</p>
            </div>
          </li>
          <li>
            <img src="images/avatar-ali.png" alt="">
            <div class="slider-content | flow" style="--flow-spacer: 1rem">
              <h3 class="fw-bold">Ali Bravo</h3>
              <p data-width="wide">"We have been able to cancel so many other subscriptions since using Manage. There is no more cross-channel confusion and everyone is much more focused."</p>
            </div>
          </li>
          <li>
            <img src="images/avatar-richard.png" alt="">
            <div class="slider-content | flow" style="--flow-spacer: 1rem">
              <h3 class="fw-bold">Richard Watts</h3>
              <p data-width="wide">"Manage allows us to provide structure and process. It keeps us organized and focused. I can't stop recommending them to everyone I talk to!"</p>
            </div>
          </li>
          <li>
            <img src="images/avatar-shanai.png" alt="">
            <div class="slider-content | flow" style="--flow-spacer: 1rem">
              <h3 class="fw-bold">Shanai Gough</h3>
              <p data-width="wide">"Their software allows us to track, manage, and collaborate on our projects from anywhere. It keeps the whole team in sync without being intrusive."</p>
            </div>
          </li>
        </ul>
          <button class="button">Get Started</button>
      </section>

Javascript:

const slider = new A11YSlider(document.querySelector(".slider"), {
    dots: true,
    arrows: false,
    
    responsive: {
      480: {
        dots: false, // dots disabled above 480
      },
    },
  });

CSS:

/* slider */

.slider {
display: flex;
gap: var(--size-600);
list-style: none;
}

.a11y-slider-container {
margin-block: var(--size-700);
margin-inline: var(--size-400);
}

.slider > * {
position: relative;
flex: 0 0 auto;
width: 100%;
}

@media (min-width: 30em) {
.slider {
  scroll-padding-inline: 25px;
}
.a11y-slider-container {
  margin-inline: 0;
}
.slider > * {
  width: 50%;
}
}

@media (min-width: 47em) {
.slider > * {
  width: 28%;
}
}

.slider-content {
border-radius: var(--size-100);
padding: var(--size-700) var(--size-600) var(--size-600);
background: var(--clr-neutral-200);
}

.slider img {
width: var(--size-800);
position: relative;
top: calc(var(--size-800) / 2);
margin-inline: auto;
}

.a11y-slider-dots {
display: flex;
justify-content: center;
margin-block: var(--size-500);
gap: var(--size-300);
}

.a11y-slider-dots li {
display: block;
width: 12px;
height: 12px;
padding: 0;
}

.a11y-slider-dots li button {
display: block;
font-size: 0;
text-indent: -9999px;
background: transparent;
border: 1px solid var(--clr-accent-400)
!important;
width: 100%;
height: 100%;
border-radius: 100%;
}

.a11y-slider-dots li button.active {
background: var(--clr-accent-400);
}