[코딩 뽀시래기] owl-carousel을 사용한 슬라이드에서 customdots 사용하는 방법
본문
안녕하세요 ^^
bx-slider에서 커스텀한 pager로 페이지 이동할 때마다 pager가 안눌리는 현상이 있어서 슬라이드 만드는 라이브러리(?? 플러그인 이라고 하나요???)를 교체하려고 찾아봤더니 owl-carousel을 많이 사용한다고해서
구글링 해보면서 적용중인데요
dotsDate에 숫자를 넣으면 정상적으로 작동하는데 이미지를 넣어서 사용하려고하면 무조건 첫번째 이미지로 돌아가는 현상이 있어서 자문을 구하고자 합니다 ^^
많은 고수분들의 도움 부탁드립니다 ^^
HTML에는 이렇게 입력했습니다.
<div id="owl-demo" class="myslider owl-carousel owl-theme">
<div class="item" data-dot="<button role='button' class='owl-dot'><img src='/mobile/img/hospital/m_hospital_photo_gallery4F_01.jpg'></button>">
<img src="/mobile/img/hospital/m_hospital_photo_gallery4F_01.jpg" alt="병원 둘러보기">
</div>
<div class="item" data-dot="<button role='button' class='owl-dot'><img src='/mobile/img/hospital/m_hospital_photo_gallery4F_02.jpg'></button>">
<img src="/mobile/img/hospital/m_hospital_photo_gallery4F_02.jpg" alt="병원 둘러보기">
</div>
<div class="item" data-dot="<button role='button' class='owl-dot'><img src='/mobile/img/hospital/m_hospital_photo_gallery4F_03.jpg'></button>">
<img src="/mobile/img/hospital/m_hospital_photo_gallery4F_03.jpg" alt="병원 둘러보기">
</div>
<div class="item" data-dot="<button role='button' class='owl-dot'><img src='/mobile/img/hospital/m_hospital_photo_gallery4F_04.jpg'></button>">
<img src="/mobile/img/hospital/m_hospital_photo_gallery4F_04.jpg" alt="병원 둘러보기">
</div>
<div class="item" data-dot="<button role='button' class='owl-dot'><img src='/mobile/img/hospital/m_hospital_photo_gallery4F_05.jpg'></button>">
<img src="/mobile/img/hospital/m_hospital_photo_gallery4F_05.jpg" alt="병원 둘러보기">
</div>
</div>
JS에는 이렇게 입력했습니다.
$('.myslider').owlCarousel({
items : 1, //화면에 표시 할 슬라이드 수
nav: false,
dots : true, // Pagination 표시 여부
autoplay : true, // 자동 슬라이드 여부
autoplayTimeout : 3000, // 자동 슬라이드 시간 (예제는 3초)
dotsData: true,
animateOut : 'fadeOut', // 사라질때의 애니메이션
margin : 10, // 슬라이드 간격
loop : true // 무한 반복 여부
});
답변 2
https://codepen.io/foreachDevelop/pen/ZEvBOxE
올려드렸습니다.
dot 버튼의 background-image 를 사용하세요.
플러그인 dom 구조상 그냥 img src 는 안되나봅니다.
감사합니다! ㅎㅎ 보내주신 링크 참고해서 해결했습니다!
owl-carousel에서
owl-dots라는 div 클래스명과 현재 이미지를 5개 쓰고있을테니 5개의 버튼이 생성되었을겁니다.
5개의 버튼에서 더 들어가 보면 <span></span>으로 감싸져 있습니다.
첫번째 button에 클래스명이 owl-dot active라고 적혀있고 f12로 눌러보면 클래스명이
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span
라고 나올겁니다. 이게 active되었을때의 dot인데
owl-demo에 div클래스명을 하나 더감싸서
css에다가
.asdf .owl-demo .owl-dots .owl-dot.active.span 에 background를 삽입하실 이미지로 넣으시고
active가 아닌 .owl-theme .owl-dots .owl-dot span 은 active가 안된 dot 이미지를 background 이미지로 삽입하시면 될것같아요
감사합니다!!!
알려주신 방법 참고해서 해결했습니다 ㅎㅎ
background로 활용하면 되는거였군요 ㅎㅎ
