Swiper.js have offset looped slides prepended sooner?

I have a looping image slider built with Swiper. I also have an offset on the slides so that you can see the slides that come before and after the active slide with the opacity dialed back. Everything is working great, except for the timing of the final slide being prepended to the slider wrapper when navigating backwards.

$(function() {
  var swiper = new Swiper(".mySwiper", {
    direction: 'horizontal',
    slidesOffsetBefore: 100,
    slidesPerView: 'auto',
    spaceBetween: 30,
    initialSlide: 1,
    centeredSlides: false,
    loop: true,
    grabCursor: true,
    observer: true,
    observeParents: true,
    navigation: {
        nextEl: '.swiper-next',
        prevEl: '.swiper-prev'
    }
  });
});

html,
body {
  position: relative;
  height: 100%;
}

body {
  display:flex;
  align-items:center;
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.container {
  height:300px;
}

.swiper {
  width: 100%;
  height: 100%;
  overflow:visible!important;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width:50%;
  opacity:.5;
}

.swiper-slide-active {
  opacity:1;
}

<link href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<div class="container">
  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
    </div>
    <div class="swiper-nav">
        <button class="swiper-prev">Previous</button>
        <button class="swiper-next">Next</button>
    </div>
  </div>
</div>

I am using initialSlide: 1 to start with the 2nd slide being active. This works for the initial load, but if you hit "previous" it gets back to a point where you cannot see a slide to the left of the active one, because it hasn't yet been prepended to the swiper-wrapper element. Is there a way around this?

Initial desired look:

And once you click previous making the first slide active:

Solution

To resolve the issue, use the loopAdditionalSlides parameter to ensure Swiper preloads more slides in the loop (to enable the seamless backward navigation), like so:

$(function() {
  var swiper = new Swiper(".mySwiper", {
    direction: 'horizontal',
    slidesOffsetBefore: 100,
    slidesPerView: 'auto',
    spaceBetween: 30,
    initialSlide: 1,
    centeredSlides: false,
    loop: true,
    loopAdditionalSlides: 2, // Add more slides for looping
    grabCursor: true,
    observer: true,
    observeParents: true,
    navigation: {
      nextEl: '.swiper-next',
      prevEl: '.swiper-prev'
    }
  });
});

html,
body {
  position: relative;
  height: 100%;
}

body {
  display:flex;
  align-items:center;
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.container {
  height:300px;
}

.swiper {
  width: 100%;
  height: 100%;
  overflow:visible!important;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width:50%;
  opacity:.5;
}

.swiper-slide-active {
  opacity:1;
}

<link href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<div class="container">
  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
    </div>
    <div class="swiper-nav">
        <button class="swiper-prev">Previous</button>
        <button class="swiper-next">Next</button>
    </div>
  </div>
</div>