[코딩 뽀시래기] owl-carousel을 사용한 슬라이드에서 customdots 사용하는 방법

[코딩 뽀시래기] owl-carousel을 사용한 슬라이드에서 customdots 사용하는 방법

QA

[코딩 뽀시래기] 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 이미지로 삽입하시면 될것같아요

답변을 작성하시기 전에 로그인 해주세요.
전체 55
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT