swiper

swiper copied to clipboard

Check that this is really a bug

• [X] I confirm

Reproduction link

https://nintenduo.com/analisis-danganronpa-decadence-nintendo-switch/

Bug description

While trying to use multiples Swiper instances in a page they have a strange behaviour. Some of them don't work, some of them starts with the second of third slide.

This is the code:

<script type="module">
  import Swiper from 'https://unpkg.com/swiper@7/swiper-bundle.esm.browser.min.js';

  setTimeout(() => {
    const swiperThumbs = new Swiper('.js-block-gallery-thumbs-{{$block['id']}}', {
      spaceBetween: 12,
      slidesPerView: 4,
      freeMode: true,
      watchSlidesProgress: true,
      breakpoints: {
        700: {
          slidesPerView: 7,
          spaceBetween: 12,
        },
      },
    });

    const swiper = new Swiper('.u-swiper-container-{{$block['id']}}', {
      slidesPerView: 'auto',
      loop: false,
      autoHeight: false,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      thumbs: {
        swiper: swiperThumbs,
      },
      pagination: {
        el: '.swiper-pagination',
        type: 'fraction',
      },
      keyboard: {
        enabled: true,
        onlyInViewport: true,
      },
    });
  }, 1000);
</script>

<div class="c-block-gallery">
  <div class="c-block-gallery__main swiper js-block-gallery u-swiper-container-{{$block['id']}}" data-id="{{$block['id']}}">
    <div class="swiper-wrapper">
      @foreach($gallery as $image)
        @php
          $imageSrc = $image['url'];
          $alt = $image['alt'];
          $height = $image['height'];
          $width = $image['width'];

        @endphp
        <div class="swiper-slide">
          <picture class="c-block-gallery__image js-object-fit">
            <img
                src="{{ $imageSrc }}"
                alt="{{ $alt }}"
                loading="lazy"
                height="{{ $height }}"
                width="{{ $width }}"
            >
          </picture>
        </div>
      @endforeach
    </div>

    <div class="swiper-button-prev c-block-gallery__arrow">
      @include('icons.arrow-slider')
    </div>

    <div class="swiper-button-next c-block-gallery__arrow">
      @include('icons.arrow-slider')
    </div>

    <div class="swiper-pagination c-block-gallery__pagination"></div>
  </div>

  <div thumbsSlider="" class="c-block-gallery__thumbs swiper js-block-gallery-thumbs-{{$block['id']}} u-margin--top-sm">
    <div class="swiper-wrapper">
      @foreach($gallery as $image)
        @php
          $imageSrc = $image['url'];
          $alt = $image['alt'];
          $height = $image['height'];
          $width = $image['width'];

        @endphp
        <div class="swiper-slide">
          <div class="c-block-gallery__thumb__overlay">
            <picture class="c-block-gallery__thumb js-object-fit">
              <img
                  src="{{ $imageSrc }}"
                  alt="{{ $alt }}"
                  loading="lazy"
                  height="{{ $height }}"
                  width="{{ $width }}"
              >
            </picture>
          </div>
        </div>
      @endforeach
    </div>
  </div>
</div>

Expected Behavior

No response

Actual Behavior

No response

Swiper version

7.4.1

Platform/Target and Browser Versions

macOS Chrome

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• [X] Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• [ ] I'm willing to open a PR

Would be good to see isolated example using CodeSandbox, right now your website works really slow for me, and I am not sure it is related to swiper or some other scripts

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Check that this is really a bug

• [x] I confirm

Reproduction link

https://nintenduo.com/analisis-danganronpa-decadence-nintendo-switch/

Bug description

While trying to use multiples Swiper instances in a page they have a strange behaviour. Some of them don't work, some of them starts with the second of third slide.

This is the code:

<script type="module">
  import Swiper from 'https://unpkg.com/swiper@7/swiper-bundle.esm.browser.min.js';

  setTimeout(() => {
    const swiperThumbs = new Swiper('.js-block-gallery-thumbs-{{$block['id']}}', {
      spaceBetween: 12,
      slidesPerView: 4,
      freeMode: true,
      watchSlidesProgress: true,
      breakpoints: {
        700: {
          slidesPerView: 7,
          spaceBetween: 12,
        },
      },
    });

    const swiper = new Swiper('.u-swiper-container-{{$block['id']}}', {
      slidesPerView: 'auto',
      loop: false,
      autoHeight: false,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      thumbs: {
        swiper: swiperThumbs,
      },
      pagination: {
        el: '.swiper-pagination',
        type: 'fraction',
      },
      keyboard: {
        enabled: true,
        onlyInViewport: true,
      },
    });
  }, 1000);
</script>

<div class="c-block-gallery">
  <div class="c-block-gallery__main swiper js-block-gallery u-swiper-container-{{$block['id']}}" data-id="{{$block['id']}}">
    <div class="swiper-wrapper">
      @foreach($gallery as $image)
        @php
          $imageSrc = $image['url'];
          $alt = $image['alt'];
          $height = $image['height'];
          $width = $image['width'];

        @endphp
        <div class="swiper-slide">
          <picture class="c-block-gallery__image js-object-fit">
            <img
                src="{{ $imageSrc }}"
                alt="{{ $alt }}"
                loading="lazy"
                height="{{ $height }}"
                width="{{ $width }}"
            >
          </picture>
        </div>
      @endforeach
    </div>

    <div class="swiper-button-prev c-block-gallery__arrow">
      @include('icons.arrow-slider')
    </div>

    <div class="swiper-button-next c-block-gallery__arrow">
      @include('icons.arrow-slider')
    </div>

    <div class="swiper-pagination c-block-gallery__pagination"></div>
  </div>

  <div thumbsSlider="" class="c-block-gallery__thumbs swiper js-block-gallery-thumbs-{{$block['id']}} u-margin--top-sm">
    <div class="swiper-wrapper">
      @foreach($gallery as $image)
        @php
          $imageSrc = $image['url'];
          $alt = $image['alt'];
          $height = $image['height'];
          $width = $image['width'];

        @endphp
        <div class="swiper-slide">
          <div class="c-block-gallery__thumb__overlay">
            <picture class="c-block-gallery__thumb js-object-fit">
              <img
                  src="{{ $imageSrc }}"
                  alt="{{ $alt }}"
                  loading="lazy"
                  height="{{ $height }}"
                  width="{{ $width }}"
              >
            </picture>
          </div>
        </div>
      @endforeach
    </div>
  </div>
</div>

Expected Behavior

No response

Actual Behavior

No response

Swiper version

7.4.1

Platform/Target and Browser Versions

macOS Chrome

Validations

• [x] Follow our Code of Conduct
• [x] Read the docs.
• [x] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• [x] Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• [ ] I'm willing to open a PR

I am facing a similar issue in swiper-angular.

Swiper v9 doesn't lazy module anymore. If you have similar issues in Swiper 9, open a new issue with a CodeSandbox showing the issue.