Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
2 tasks done
AnoopFranc opened this issue Apr 26, 2024 · 0 comments
Open
2 tasks done

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

AnoopFranc opened this issue Apr 26, 2024 · 0 comments
Labels
bug Something isn't working

Comments

@AnoopFranc
Copy link

Checks

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.

@AnoopFranc AnoopFranc added the bug Something isn't working label Apr 26, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant