배너 소스 뭐가 문제인지 확인해주시면 감사하겠습니다 ㅠㅠ
본문
메뉴아이콘 동적인 애니메이션 구현 소스가 뭐가 문제일까요 ㅠㅠ
제 사이트 링크이구요.. 메인배너 소스 건드리고 있는데 애니메이션 동작구현이 되다가 마네요 ㅠㅠ
카피사이트 링크입니다
<div id="main_wrapp">
<div class="main_bn_wrapp">
<div class="main_bnp slick-initialized slick-slider slick-dotted slick-list draggable slick-track" style="opacity: 1;">
<div class="item01p itemp">
<a href="https://xn--6j1b81kvyd.com/" tabindex="0">
<div class="bn_txt_wrapp">
<span>프리미엄 캠페인 안내</span>
<div class="txt_wrapp">
<p class="titp">프리미엄 전용 캠페인 출시</p>
<p class="sub_txtp">
네이버인플루언서라면 채널 인증하고 참여하세요
</p>
</div>
<div class="bn_arrowp">
<svg
width="50"
height="15"
viewBox="0 0 50 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2 13H46L34.5 2"
stroke="white"
stroke-width="3"
stroke-miterlimit="10"
stroke-linecap="round"
></path>
</svg>
</div>
</div>
</a>
<input
type="hidden"
id="slick_s0"
value="서비스 출시"
tabindex="0"
/>
<input
type="hidden"
id="slick_thumb0"
value="skin/adblog/html/theme/rp/img/main-sum01.jpg"
tabindex="0"
/>
</div>
<div class="item02p itemp">
<a href="https://xn--6j1b81kvyd.com/" tabindex="-1">
<div class="bn_txt_wrapp">
<span>대한민국 1등 체험단은 유앤준</span>
<div class="txt_wrapp">
<p class="titp">유앤준 체험단 출시</p>
<p class="sub_txtp">
어디서든 유앤준체험단으로 간편하게 캠페인 신청하세요
</p>
</div>
<div class="bn_arrowp">
<svg
width="50"
height="15"
viewBox="0 0 50 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2 13H46L34.5 2"
stroke="white"
stroke-width="3"
stroke-miterlimit="10"
stroke-linecap="round"
></path>
</svg>
</div>
</div>
</a>
<input
type="hidden"
id="slick_s1"
value="인기 캠페인"
tabindex="-1"
/>
<input
type="hidden"
id="slick_thumb1"
value="skin/adblog/html/theme/rp/img/main-sum02.jpg"
tabindex="-1"
/>
</div>
<div class="item03p itemp">
<a href="https://xn--6j1b81kvyd.com/" tabindex="-1">
<div class="bn_txt_wrapp">
<span>리뷰어 가이드</span>
<div class="txt_wrapp">
<p class="titp">유앤준체험단이 처음이신가요?</p>
<p class="sub_txtp">
가이드대로만 하면 체험단 신청 어렵지 않아요
</p>
</div>
<div class="bn_arrowp">
<svg
width="50"
height="15"
viewBox="0 0 50 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2 13H46L34.5 2"
stroke="white"
stroke-width="3"
stroke-miterlimit="10"
stroke-linecap="round"
></path>
</svg>
</div>
</div>
</a>
<input
type="hidden"
id="slick_s2"
value="프리미어 캠페인"
tabindex="-1"
/>
<input
type="hidden"
id="slick_thumb2"
value="skin/adblog/html/theme/rp/img/main-sum03.jpg"
tabindex="-1"
/>
</div>
</div>
</div>
</div>
<div class="bn_thumb_wrapp">
<div class="bn_thumbp">
<ul class="slick-dots" role="tablist" style="display: block">
<li class="" role="presentation">
<div class="thumb">
<div class="img">
<img src="skin/adblog/html/theme/rp/img/main-sum01.jpg" alt="">
</div>
<div class="thumb_line">
<svg width="100%" height="100%">
<rect x="0" y="0" rx="8" ry="8" width="100%" height="100%"></rect>
</svg>
</div>
</div>
<p>서비스 출시</p>
</li>
<li role="presentation" class="">
<div class="thumb">
<div class="img">
<img src="skin/adblog/html/theme/rp/img/main-sum02.jpg" alt="">
</div>
<div class="thumb_line">
<svg width="100%" height="100%">
<rect x="0" y="0" rx="8" ry="8" width="100%" height="100%"></rect>
</svg>
</div>
</div>
<p>인기 캠페인</p>
</li>
<li role="presentation" class="">
<div class="thumb">
<div class="img">
<img src="skin/adblog/html/theme/rp/img/main-sum03.jpg" alt="">
</div>
<div class="thumb_line">
<svg width="100%" height="100%">
<rect x="0" y="0" rx="8" ry="8" width="100%" height="100%"></rect>
</svg>
</div>
</div>
<p>프리미어 캠페인</p>
</li>
</ul>
<ul class="slick-dots" role="tablist" style="display: block;"><li class="" role="presentation"><div class="thumb"><div class="img"><img src="skin/adblog/html/theme/rp/img/main-sum01.jpg" alt=""></div><div class="thumb_line"> <svg width="100%" height="100%"> <rect x="0" y="0" rx="8" ry="8" width="100%" height="100%"></rect> </svg> </div> </div> <p>서비스 출시</p></li><li role="presentation" class="slick-active"><div class="thumb"><div class="img"><img src="skin/adblog/html/theme/rp/img/main-sum02.jpg" alt=""></div><div class="thumb_line"> <svg width="100%" height="100%"> <rect x="0" y="0" rx="8" ry="8" width="100%" height="100%"></rect> </svg> </div> </div> <p>인기 캠페인</p></li><li role="presentation" class=""><div class="thumb"><div class="img"><img src="skin/adblog/html/theme/rp/img/main-sum03.jpg" alt=""></div><div class="thumb_line"> <svg width="100%" height="100%"> <rect x="0" y="0" rx="8" ry="8" width="100%" height="100%"></rect> </svg> </div> </div> <p>프리미어 캠페인</p></li></ul></div>
</div>답변 2
Uncaught TypeError: $(...).slick is not a function은 Slick 라이브러리의 초기화가 되지않아서 생기는 오류인것 같습니다.
우선 아래의 jQuery를 주석처리 또는 삭제해보세요
<? /* <script language="javascript" type="text/javascript" src="js/jquery-1.11.1.min.js?ver=202310251209"></script> */ ?> 주석처리 또는 삭제
위오 같이 해도 안되신다면 다음과 같이 해보시는건 어떨까 합니다
jQuery와 Slick 라이브러리를 로드
<script src="path/to/jquery.min.js"></script>
<script src="path/to/slick.min.js"></script>
슬라이드 초기화 스크립트 추가
<script>
$(document).ready(function(){
$('.main_bnp').slick({
// Slick 슬라이더 옵션 설정
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
});
});
</script>
즉 전체 코드는 다음과 같은 구조가 되어야 합니다.
<!-- jQuery 및 Slick 라이브러리 로드 -->
<script src="path/to/jquery.min.js"></script>
<script src="path/to/slick.min.js"></script>
<!-- Slick 슬라이더 초기화 스크립트 추가 -->
<script>
$(document).ready(function(){
$('.main_bnp').slick({
// Slick 슬라이더 옵션 설정
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
});
});
</script>
<!-- 나머지 HTML 코드 -->
<div id="main_wrapp">
<!-- ... (이하 생략) ... -->
</div>
<div class="bn_thumb_wrapp">
<!-- ... (이하 생략) ... -->
</div>
헐 완전 감사합니다 ㅠㅠ 사이트 적용하니 잘 되었어요
근데 상단 메뉴3개에서 로딩게이지가 가득 안차는데 소스 뭐가 잘못된걸까요? ㅠㅠ
래퍼런스사이트 링크처럼 하고싶은건데 https://reviewplace.co.kr/ 링크남겨요... ㅠㅠ
제 사이트는 https://xn--6j1b81kvyd.com/ 입니다 !!!
상단 메뉴의 로딩 게이지가 가득 차지 않는 문제는 스크립트와 관련된 것이 아니라 CSS 스타일 또는 HTML 마크업에 의해 발생할 수 있는 부분이기 때문에 해당관련 css 및 html 코드를 확인해 보셔야 할 것 같습니다
jquery가 두개 이상 있으신거 같네요 다 살펴보지는 않았는데 하나로 통일하시고 일단 지금 slick 있는 없는 펑션이라도 콘솔에러가 뜨시니 다른 소스 지우거나 하시면서 충돌 원일을 찾으셔야 할거 같습니다.
제가 html 알못이라 ㅠㅠ 혹시 해결해주실 수 있나요?? 제이큐어리는 어떻게 합쳐야되는지 모르겠어요 ㅠㅠ 파일이 2개인데 1개는 제가 가지고 온거에요
답변을 작성하시기 전에 로그인 해주세요.