스와이퍼 네비게이터 항상 보이게하기
본문
안녕하세요, 스와이퍼에서 넘길 페이지가 없어도 항상 네비게이터가 보이게 하고 싶습니다.
<script>
var swiper = new Swiper(".swiperTop", {
slidesPerView: 3,
spaceBetween: 30,
freeMode: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>
이런 코드를 사용해서, 총 3장의 페이지가 보이게하고 4번째 슬라이드부터 안나오게하는.. 그런 느낌인데요
슬라이드를 3개만 넣으면 네비게이터가 안 보입니다. (사진 위쪽 참고, 아래쪽은 4 슬라이드 이상 존재하는스와이퍼 입니다.) 4번째 슬라이드를 넣지 않아도 네비게이터가 표시되게 할 수 있을까요?
답변 2
<style> .swiper-button-prev, .swiper-button-next { display: block !important; } </style>
이렇게 css를 넣으시면 무조건 보이실껍니다.
loop: true, 를 추가하세요.
<script>
var swiper = new Swiper(".swiperTop", {
slidesPerView: 3,
spaceBetween: 30,
freeMode: true,
loop: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>
답변을 작성하시기 전에 로그인 해주세요.