Issue
I need to make two swiperjs in one html page but isn't working. I trying tow change and add new class but the result its same..
my Html
<!-- swiper1 Services Sections -->
<div class="service__container container ">
<div class="service__title">
<h1>services</h1>
</div>
<div class="swiper1 mySwiper1">
<div class="swiper-wrapper">
<div class="card swiper-slide1">
<img class="img__card" src="/img/Digital.png" alt="Avatar" style="width:100%">
<div class="card__info">
<h4 class="card__title"><b>Our service one</b></h4>
<p class="card__suptitle">Our service two</p>
</div>
</div>
<div class="card swiper-slide1">
<img class="img__card" src="/img/coding.png" alt="Avatar" style="width:100%">
<div class="card__info">
<h4 class="card__title"><b>Lorem ipsum dolor sit, amet consectetur</b></h4>
<p class="card__suptitle">Lorem ipsum dolor sit, amet consectetur</p>
</div>
</div>
<!-- swiper2 -->
<div class="customers__container container swiper mySwiper1">
<div class="swiper-wrapper customers__img">
<img class="swiper-slide" src="/img/customers1.png" style="width:100%">
<img class="swiper-slide" src="/img/custopmer2.png" style="width:100%">
<img class="swiper-slide" src="/img/customer3.png" style="width:100%">
</div>
</div>
</div>
and the js code for swiper1 and swiper2:
var swiper1 = new Swiper(".mySwiper1", {
effect: "cube",
grabCursor: true,
cubeEffect: {
shadow: true,
slideShadows: true,
shadowOffset: 20,
shadowScale: 0.94,
},
pagination: {
el: ".swiper-pagination",
},
});
//swiper2
var swiper2 = new Swiper(".mySwiper2", {
effect: "cards",
grabCursor: true,
});
the swiper2 its working as I want. but swiper1 not working.
Solution
Basic example
Your first slider missing the mandatory HTML layout (swiper
instead of swiper1
and swiper-slide
instead of swiper-slide1
).
https://swiperjs.com/get-started#add-swiper-html-layout
Wrong:
<div class="swiper1 will_not_work">
<!-- const swiper = new Swiper('.will_not_work', { -->
Correct:
<div class="swiper will_work">
<!-- const swiper = new Swiper('.will_work', { -->
snippet
let swiper_setting = {
spaceBetween: 100,
pagination: {
el: '.swiper-pagination',
}
}
let swiper_setting_two = {
spaceBetween: 200,
}
let swiper_1 = new Swiper("[slider_one]", swiper_setting);
let swiper_2 = new Swiper("[slider_two]", swiper_setting_two);
html,
body {
background: #403F6B;
}
.swiper {
width: 100%;
height: 100%;
position: relative;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
height: 200px!important;
/* Center slide text vertically */
display: flex;
margin-bottom: 40px!important;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
<script src="https://unpkg.com/swiper@8.3.2/swiper-bundle.min.js"></script>
<link href="https://unpkg.com/swiper@8.3.2/swiper-bundle.min.css" rel="stylesheet"/>
<!-- Slider main container -->
<div class="swiper thumbnails-grid" slider_one>
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><a>Slide 1</a></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>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
</div>
<div class="swiper thumbnails-grid" slider_two>
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><a>Slide 1</a></div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
</div>
Loop throw example (multiple sliders with same setting):
You can take the example above and loop throw all sliders (Lets say for real estate pagelist with slider for each house card **like airbnb):
let swiper_setting = {
spaceBetween: 100,
pagination: {
el: '.swiper-pagination',
}
}
var swiper_nodes = document.querySelectorAll('.swiper');
/* loop throw */
[].forEach.call(swiper_nodes, function(swiper_node) {
// do whatever
let swiper = new Swiper(swiper_node, swiper_setting);
});
html,
body {
background: #403F6B;
}
main{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
column-gap: 3px;
}
.swiper {
width: 100%;
height: 100%;
position: relative;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
height: 200px!important;
/* Center slide text vertically */
display: flex;
margin-bottom: 40px!important;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
<script src="https://unpkg.com/swiper@8.3.2/swiper-bundle.min.js"></script>
<link href="https://unpkg.com/swiper@8.3.2/swiper-bundle.min.css" rel="stylesheet"/>
<!-- Slider main container -->
<main>
<div class="swiper thumbnails-grid" slider_one>
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><a>Slide 1</a></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>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
</div>
<div class="swiper thumbnails-grid" slider_two>
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><a>Slide 1</a></div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
</div>
<div class="swiper thumbnails-grid" slider_two>
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><a>Slide 1</a></div>
<div class="swiper-slide">Slide 2</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
</div>
</main>
Answered By - Ezra Siton
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.