swiper 스크립트 충돌 문의드립니다~
본문
현재 한 페이지에 각기 다른 swiper 2개를 사용중이고
스크립트 역시 두개입니다.
그런데 동시에 쓸려고 보니 같이 쓰면
슬라이드기능과 한쪽 navigation 화살표는
작동하지 않고 나머지 한쪽만 작동하는 현상이 발샐됩니다.
작동하는 것은 위에 스크립트를 배치한 swiper만 작동됩니다.
이것저것 계속 시도중인데 2시간째 방법을 못찾아서
도움을 받을 수 있을까 여쭤봅니다.
알려주시면 정말 감사하겠습니다!
<script>
var swiper = new Swiper(".mySwiper2", {
slidesPerView: 4,
spaceBetween: 10,
freeMode: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
<script>
const swiper = new Swiper('.swiper', {
// Optional parameters
direction: 'horizontal',
effect : 'fade',
loop: true,
autoplay: {
display:2000,
},
// If we need pagination
pagination: {
el: '.swiper-pagination',
type:'bullets',
clickable:true,
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
});
</script>
답변 1
var swiper 이름을 따로 처리 해주세요
그리고 화살표는 조금더 디테일한 선택자를 쓰세요
.swiper .swiper-button-next 그럼 따로 따로 동작합니다.