Trying to loop 1 slide per page in loop unable to acheive

[AnoopFranc]

Checks

• [X] Not a duplicate.
• [X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

v4.1.4

Description

    <div id="carousle_with_one_slide" class="splide">
      <div class="splide__track relative">
        <div class="splide__list carousel-logo">
          {{ usp_cards }}
          <div class="splide__slide">
            {{ title }}
          </div>
          {{ /usp_cards }}
        </div>
      </div>
    </div>

 const carouselWithOneSlide = document.getElementById("carousle_with_one_slide");
  console.log(uspsCarousel)
  const splide = new Splide(carouselWithOneSlide, {
    type: 'loop',
    autoplay: true,
    arrows:false,
    interval: 3000,
    mediaQuery: 'min',
    breakpoints: {
      768: { 
        destroy: true,
      }
    },
    classes: {
      pagination: "carousel-pagination",
      page: "carousel-page",
    },
  }).mount();

I was trying to create a carousel that loops on mobile screens (breakpoint 767px) and displays only one slide per page. While I only have three slides, I'm seeing my original three and more clones appearing alongside them.

Reproduction Link

No response

Steps to Reproduce

create a splide carousel similar to this

    <div id="carousle_with_one_slide" class="splide">
      <div class="splide__track relative">
        <div class="splide__list carousel-logo">
          {{ usp_cards }}
          <div class="splide__slide">
            {{ title }}
          </div>
          {{ /usp_cards }}
        </div>
      </div>
    </div>

 const carouselWithOneSlide = document.getElementById("carousle_with_one_slide");
  console.log(uspsCarousel)
  const splide = new Splide(carouselWithOneSlide, {
    type: 'loop',
    autoplay: true,
    arrows:false,
    interval: 3000,
    mediaQuery: 'min',
    breakpoints: {
      768: { 
        destroy: true,
      }
    },
    classes: {
      pagination: "carousel-pagination",
      page: "carousel-page",
    },
  }).mount();

Expected Behaviour

One slide should appear in screens below 768px and should loop every 3000ms.