배너 소스 뭐가 문제인지 확인해주시면 감사하겠습니다 ㅠㅠ

배너 소스 뭐가 문제인지 확인해주시면 감사하겠습니다 ㅠㅠ

QA

배너 소스 뭐가 문제인지 확인해주시면 감사하겠습니다 ㅠㅠ

본문

2108922652_1703771988.7666.png

 

메뉴아이콘 동적인 애니메이션 구현 소스가 뭐가 문제일까요 ㅠㅠ

 

https://xn--6j1b81kvyd.com/

 

제 사이트 링크이구요.. 메인배너 소스 건드리고 있는데 애니메이션 동작구현이 되다가 마네요 ㅠㅠ

 

카피사이트 링크입니다

https://youandjunad.co.kr/

 


      <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 있는 없는 펑션이라도 콘솔에러가 뜨시니 다른 소스 지우거나 하시면서 충돌 원일을 찾으셔야 할거 같습니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 2,086
QA 내용 검색
filter #css ×

회원로그인

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