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