슬라이드 스크립트에서 dot 넣는 방법이요~
본문
$(function(){
$('.visual').each(function(index, element){
$(this).addClass('s'+index);
$(this).find(".swiper-button-prev").addClass("btn-prev-" + index);
$(this).find(".swiper-button-next").addClass("btn-next-" + index);
mainSwiper = new Swiper('.s'+index, {
dots: true,
direction: 'horizontal',
observer: true,
observeParents: true,
fade:true,
loop:true,
speed:1500,
autoplay: {
delay: 7000,
disableOnInteraction: true,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
keyboard: {
enabled: true,
onlyInViewport: false,
},
navigation: {
nextEl: '.vnext',
prevEl: '.vprev',
},
customPaging: function(slick,index) {
return '<div class="circle_wrap"><div class="circle-line"></div><div class="circle circle1"><span class="circle-inner"></span></div><div class="circle circle2"><span class="circle-inner"></span></div></div>'
}
});
});
})
여기서 위에처럼 점세개 넣고 싶은데요
dots: true, 이거 넣었는데도 안나오는건 다른 코드를 넣어야 하나요?
답변 1
pagination: {
el: '.swiper-pagination',
clickable: true,
},
이 항목이 dot로 표현되는 페이징을 나타내는 부분인데
.swiper-pagination 부분을 html 로 넣어주셔야 적용이 됩니다.
그리고 swiper slide를 여러개 사용하시는것 같은데 정확히 각각의 슬라이더 마다 paging 을 사용하시려면
각각의 .visual 안에
<div class="swiper-pagination"></div>을 넣어주고
pagination: {
el: '.s'+index+' .swiper-pagination',
clickable: true,
},
이렇게 적용하셔야 할것같네요.
답변을 작성하시기 전에 로그인 해주세요.
