Components: Swiper

Luxize Integrates Swiper JS into its layout. Basic Swiper code:

<div class="swiper-container">
  
  <div id="swiperID-1" class="swiper section-swiper w-100" data-js-swiper="auto" data-cursor=".cursor-swiper">
    
    <div class="swiper-wrapper">
      <div class="swiper-slide bg-primary-subtle"><h3 class="display-3 text-center my-5 w-100">Slide 1</h3></div>
      <div class="swiper-slide bg-secondary-subtle"><h3 class="display-3 text-center my-5 w-100">Slide 2</h3></div>
      <div class="swiper-slide bg-dark" data-bs-theme="dark"><h3 class="display-3 text-center my-5 w-100">Slide 3</h3></div>
    </div>
    <!-- /.swiper-wrapper -->

  </div>
  <!-- /.swiper -->

  <a href="#swiperID-1" data-swiper-nav="prev" data-cursor=".cursor-swiper-prev" class="swiper-nav swiper-nav-prev" tabindex="0" role="button"><span class="swiper-nav-btn"><i class="bi bi-chevron-left"></i></span></a>
  <a href="#swiperID-1" data-swiper-nav="next" data-cursor=".cursor-swiper-next" class="swiper-nav swiper-nav-next" tabindex="0" role="button"><span class="swiper-nav-btn"><i class="bi bi-chevron-right"></i></span></a>

</div>
<!-- /.swiper-container -->

The result:

Slide 1

Slide 2

Slide 3

Section + Swiper

Integrating swiper into section is easy. Just put swiper code inside .section-inner

<section class="section">

  <div class="section-bg bg-body">
    <div class="bg position-relative h-100 bg-primary-subtle ">
      <img src="/path/to/image" class="bg-img invisible" alt="" loading="lazy">
    </div>
  </div>
  <!-- /.section-bg.bg-body -->

  <div class="section-inner container-xl">
    
    <div class="swiper-container">
  
      <div id="swiperID-2" class="swiper section-swiper w-100" data-js-swiper="auto" data-cursor=".cursor-swiper">
        
        <div class="swiper-wrapper">
          <div class="swiper-slide bg-primary-subtle"><h3 class="display-3 text-center my-5 w-100">Slide 1</h3></div>
          <div class="swiper-slide bg-secondary-subtle"><h3 class="display-3 text-center my-5 w-100">Slide 2</h3></div>
          <div class="swiper-slide bg-dark" data-bs-theme="dark""><h3 class="display-3 text-center my-5 w-100">Slide 3</h3></div>
        </div>
        <!-- /.swiper-wrapper -->

      </div>
      <!-- /.swiper -->

      <a href="#swiperID-2" data-swiper-nav="prev" data-cursor=".cursor-swiper-prev" class="swiper-nav swiper-nav-prev" tabindex="0" role="button"><span class="swiper-nav-btn"><i class="bi bi-chevron-left"></i></span></a>
      <a href="#swiperID-2" data-swiper-nav="next" data-cursor=".cursor-swiper-next" class="swiper-nav swiper-nav-next" tabindex="0" role="button"><span class="swiper-nav-btn"><i class="bi bi-chevron-right"></i></span></a>

    </div>
    <!-- /.swiper-container -->

  </div>
  <!-- /.section-inner container-xl -->
  
</section>

The result:

Slide 1

Slide 2

Slide 3

As you see in the result above, the width of the swiper is contained within the .section-inner.container-xl. We can make the swiper expand beyond the section container by adding .expandx class ito the .swiper like this:

<div class="swiper section-swiper expandx" data-js-swiper="auto" data-cursor=".cursor-swiper">

The result:

Slide 1

Slide 2

Slide 3

Now to make the swiper expand beyond section inner, but you want to keep the content aligned with section container then add expandx--realignclass to the .swiper.section-swiper like this

<div class="swiper section-swiper expandx expandx--realign" data-js-swiper="auto" data-cursor=".cursor-swiper">

And you can set different width to each slide. See example below