애니빌드.LAB
토론방
디자인팜2.0 디자인블록 슬라이드 추가시 메인슬라이드가 틀어지는 문제 문의드립니다.
- k**ls
- 2019-06-28 15:30:27
- hit1743
- http://lab.anybuild.co.kr/bbs/qna/7199
메인 슬라이드 이미지 양쪽에 클래스명 'owl-nav' 의 페이지를 넘기는 네비게이션이 있는데
두번째 사진의 슬라이드(디자인블록) 을 넣게 되면 클래스명이 겹치는지
3번째 사진처럼 메인슬라이드 화살표가 사라지면서 이미지의 높이가 이상해집니다.
해결방법이 있을까요?
( 디자인블록 슬라이드 추가 상태 )
(nav 사라짐)
게시글 공유
URL복사
댓글작성
열기 닫기
열기 닫기
새로 설치된 슬라이드의 JS 버전이 더 높아서 기존에 있던 슬라이드와 충돌이 생기는 현상입니다.
슬라이드를 새로 설치 시 같은 현상이 생기면 아래의 설명을 참고하셔서 수정해주세요~
<HTML>
수정 전
<load target="/img_up/_addon/_plugin/owl.carousel/2.0.0-beta.2.4/assets/owl.carousel.min.css">
<load target="/img_up/_addon/_plugin/owl.carousel/2.0.0-beta.2.4/owl.carousel.min.js">
수정 후
<load target="/img_up/_addon/_plugin/owl.carousel/2.3.4/assets/owl.carousel.min.css" index="-1">
<load target="/img_up/_addon/_plugin/owl.carousel/2.3.4/owl.carousel.min.js">
<CSS>
버전업이 되면서 .owl-controls 이 사라졌기 때문에 .owl-controls을 삭제해주셔야 합니다.
.pm-slide_wide__58921__ .owl-controls .owl-nav 이렇게 되어 있던 것을 .pm-slide_wide__58921__ .owl-nav 이런 식으로 수정해주세요.
이때 .pm-slide_wide__58921__ .owl-controls .owl-nav에 적용된 -webkit-tap-highlight-color:transparent;을 .pm-slide_wide__58921__ .owl-nav으로 옮겨주세요.
수정 전
.pm-slide_wide__58921__ .owl-controls {-webkit-tap-highlight-color:transparent;}
.pm-slide_wide__58921__ .owl-controls .owl-nav [class*='owl-'] {
position:absolute; top:50%; z-index:2; width:40px; height:40px; line-height:40px; margin-top:-20px;
font-size:0; cursor:pointer; opacity:0.7;
}
.pm-slide_wide__58921__ .owl-controls .owl-nav [class*='owl-']:before{font-family:'icomoon_slider'; font-size:40px; font-weight:bold; color:#fff;}
.pm-slide_wide__58921__ .owl-controls .owl-nav [class*='owl-']:hover {opacity:1;}
.pm-slide_wide__58921__ .owl-controls .owl-nav .owl-prev {left:5px;}
.pm-slide_wide__58921__ .owl-controls .owl-nav .owl-next {right:5px;}
.pm-slide_wide__58921__ .owl-controls .owl-nav .owl-prev:before {content:'\e600';}
.pm-slide_wide__58921__ .owl-controls .owl-nav .owl-next:before {content:'\e601';}
.pm-slide_wide__58921__ .owl-controls .owl-nav .disabled {opacity:0.5; cursor:default;}
수정 후
.pm-slide_wide__58921__ .owl-nav [class*='owl-'] {
position:absolute; top:50%; z-index:2; width:40px; height:40px; line-height:40px; margin-top:-20px;
font-size:0; cursor:pointer; opacity:0.7; -webkit-tap-highlight-color:transparent;
}
.pm-slide_wide__58921__ .owl-nav [class*='owl-']:before{font-family:'icomoon_slider'; font-size:40px; font-weight:bold; color:#fff;}
.pm-slide_wide__58921__ .owl-nav [class*='owl-']:hover {opacity:1;}
.pm-slide_wide__58921__ .owl-nav .owl-prev {left:5px;}
.pm-slide_wide__58921__ .owl-nav .owl-next {right:5px;}
.pm-slide_wide__58921__ .owl-nav .owl-prev:before {content:'\e600';}
.pm-slide_wide__58921__ .owl-nav .owl-next:before {content:'\e601';}
.pm-slide_wide__58921__ .owl-nav .disabled {opacity:0.5; cursor:default;}