Html - Two Swiper slides in one page doesnt work

jsnewbie
June 28, 2023
177 views
0 votes
2 Answers

I m litte bit confused about swiper slides. Couldnt find any solution on stackowerflow at all. I am trying to put same slider in one page even i want to put 5 of them but only one of them works and its the top one. Am i missing anything on js configurations or i shouldnt put same classes on all sliders.

Here is my code;

   <div class="section-padding overflow-hidden">
            <div class="collections-carousel">
                <div class="section-title-wrapper">
                    <div class="section-title"><span class="gradient-text">Curated</span> Collections</div>
                    <div class="title-navigation">
                        <div class="featured-carousel-icon swiper-button-prev"><svg class="crumina-icon">
                                <use xlink:href="#arrow-left2-icon"></use>
                            </svg></div>
                        <div class="featured-carousel-icon swiper-button-next"><svg class="crumina-icon">
                                <use xlink:href="#arrow-right2-icon"></use>
                            </svg></div>
                    </div>
                </div>
                <div class="featured-carousel">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="collection-item">
                                <a href="02-explore.html">
                                    <div class="cover-image"><img src="img/content/artworks/artwork-2.png" alt="">
                                    </div>
                                    <div class="collection-info">
                                        <div class="title h3">Pop Culture</div>
                                        <div class="number">364 items</div>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="collection-item">
                                <a href="02-explore.html">
                                    <div class="cover-image"><img src="img/content/artworks/artwork-3.png" alt="">
                                    </div>
                                    <div class="collection-info">
                                        <div class="title h3">Motion Graphics</div>
                                        <div class="number">590 items</div>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="collection-item">
                                <a href="02-explore.html">
                                    <div class="cover-image"><img src="img/content/artworks/artwork-4.png" alt="">
                                    </div>
                                    <div class="collection-info">
                                        <div class="title h3">Illustrations</div>
                                        <div class="number">364 items</div>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="collection-item">
                                <a href="02-explore.html">
                                    <div class="cover-image"><img src="img/content/artworks/artwork-5.png" alt="">
                                    </div>
                                    <div class="collection-info">
                                        <div class="title h3">3D Art</div>
                                        <div class="number">590 items</div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

When i put same of it the second one just going crazy and also arrow buttons and slide function doesnt work.

Answers

Add a class on the whole swiper container to differentiate between each slider, and of course, initialize each.

var swiper = new Swiper(".mySwiper", {
    spaceBetween: 30,
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
});
var swiper2 = new Swiper(".mySwiper2", {
    spaceBetween: 30,
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
});
var swiper3 = new Swiper(".mySwiper3", {
    spaceBetween: 30,
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
});

html,
body {
    position: relative;
    height: 100%;
    background: #eee;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #000;
    margin: 0;
    padding: 0;
}

.swiper {
    width: 100%;
    height: 100%;
    margin: 20px 0;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/9.4.1/swiper-bundle.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/9.4.1/swiper-bundle.min.js"></script>

<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-pagination"></div>
</div>
<div class="swiper mySwiper2">
    <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-pagination"></div>
</div>
<div class="swiper mySwiper3">
    <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-pagination"></div>
</div>

Demo is taken from the documentation.

You need to initialize each swiper instance e.g using a forEach loop:

let swipers = document.querySelectorAll('.swiper')
swipers.forEach(swiper => {
  // set options
  let options = {
    slidesPerView: 3,
    spaceBetween: 10
  }
  // init
  new Swiper(swiper, options);
})

body {
  background: #eee;
  font-family: sans-serif;
}

.swiper {
  width: 100%;
  height: 100%;
  margin: 1em 0;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/9.4.1/swiper-bundle.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/9.4.1/swiper-bundle.min.js"></script>

<div class="swiper">
  <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-pagination"></div>
</div>
<div class="swiper">
  <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-pagination"></div>
</div>

This works pretty well if all your sliders share the same options (e.g slides per view, gaps etc).

You might also store individual parameters in a data-attribute

<div class="swiper" data-swiper='{"spaceBetween":10, "slidesPerView":3, "autoplay":{"delay": "1000"}, "pagination":{
    "el": ".swiper-pagination"}}'>

and run a generic initializing function

// init all sliders
initSwipers();

function initSwipers() {
  let swipers = document.querySelectorAll('.swiper')
  swipers.forEach(swiper => {
    // get options
    let options = swiper.dataset.swiper ? JSON.parse(swiper.dataset.swiper) : {};
    // init
    new Swiper(swiper, options);
  })
}

body {
  background: #eee;
  font-family: sans-serif;
}

.swiper {
  width: 100%;
  height: 100%;
  margin: 1em 0;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/9.4.1/swiper-bundle.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/9.4.1/swiper-bundle.min.js"></script>

<div class="swiper" data-swiper='{"spaceBetween":10, "slidesPerView":3, "autoplay":{"delay": "1000"}, "pagination":{
    "el": ".swiper-pagination"}}'>
  <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-pagination"></div>
</div>
<div class="swiper" data-swiper='{"spaceBetween":20, "slidesPerView":4}'>
  <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-pagination"></div>
</div>

<div class="swiper">
  <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-pagination"></div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Two Swiper slides in one page doesnt work

Answers