Как я могу использовать несколько Swiper JS с разными формами на одной HTML -странице [дубликат] ⇐ CSS

[Anonymous]

Как я могу использовать разные js swiper на одной HTML -странице. У меня есть два разных Swiper JS не одинаковые формы, а разные формы для каждого. Мне нужно использовать его на одной HTML -странице, я создал одну швафу, и он работает нормально. но когда я добавлю второе, это не работает. < /p>
Любая помощь будет отличной. < /p>

Код: Выделить всё

var swiper = new Swiper(".mySwiper", {
effect: "flip",
grabCursor: true,
pagination: {
el: ".swiper-pagination",
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
//swiper 2
var swiper = new Swiper(".mySwiper1", {
slidesPerView: 3,
spaceBetween: 30,
freeMode: true,
pagination: {
el: ".swiper-pagination_",
clickable: true,
},
});< /code>
.swiper {
width: 50%;
height: 50em;
padding: 50px;
}

.swiper-slide {
background-position: center;
background-size: cover;
width: 300px;
height: 300px;
}

.swiper-slide img {
display: block;
width: 100%;
border-radius: 10em;
}

.swiper-pagination {
top: 42em;
}

.swiper1 {
width: 100%;
height: 100%;
}

.swiper-slide1 {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}

.swiper-slide1 .img1 {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}< /code>
[*]



[list]
Home
[*]services
[*]Contact us
[/list]






[img]/img/Header_2.png[/img]


Products



  
[img]https://swiperjs.com/demos/images/nature-1.jpg[/img]


[img]https://swiperjs.com/demos/images/nature-2.jpg[/img]
مختار

[img]https://swiperjs.com/demos/images/nature-3.jpg[/img]

[img]https://swiperjs.com/demos/images/nature-4.jpg[/img]

[img]https://swiperjs.com/demos/images/nature-5.jpg[/img]

[img]https://swiperjs.com/demos/images/nature-6.jpg[/img]

[img]https://swiperjs.com/demos/images/nature-6.jpg[/img]

[img]https://swiperjs.com/demos/images/nature-5.jpg[/img]








Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9

Подробнее здесь: https://stackoverflow.com/questions/752 ... -html-page