테스트 사이트 - 개발 중인 베타 버전입니다

silck slider 슬릭 슬라이더 질문드립니당 채택완료

권혜린 2년 전 조회 1,883

안녕하세여 ㅠㅠ

코딩이 많이 아직 서툴어요 

슬릭슬라이더가 작동이안되서

어느부분이 잘못됐는지 잘모르겟어서 질문드립니당

 

 

</p>

<p><link rel="stylesheet" type="text/css" href="<a href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>" target="_blank" rel="noopener noreferrer">https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/></a></p>

<p> </p>

<p><link rel="stylesheet" href="<?php echo G5_THEME_CSS_URL; ?>/mainStyle.css"></p>

<p><link rel="stylesheet" href="<?php echo G5_THEME_CSS_URL; ?>/common/common.css"></p>

<p><link rel="stylesheet" href="<?php echo run_replace('head_css_url', G5_THEME_CSS_URL.'/style.css?ver='.G5_CSS_VER, G5_THEME_URL); ?>"></p>

<p><link rel="stylesheet" href="<?php echo run_replace('head_css_url', G5_THEME_CSS_URL.'/layout.css?ver='.G5_CSS_VER, G5_THEME_URL); ?>"></p>

<p><link rel="stylesheet" href="<?php echo run_replace('head_css_url', G5_THEME_CSS_URL.'/contents.css?ver='.G5_CSS_VER, G5_THEME_URL); ?>"></p>

<p><link rel="stylesheet" href="<?php echo run_replace('head_css_url', G5_THEME_CSS_URL.'/animate.css?ver='.G5_CSS_VER, G5_THEME_URL); ?>"></p>

<p><link rel="stylesheet" href="<?php echo run_replace('head_css_url', G5_THEME_CSS_URL.'/swiper-bundle.min.css?ver='.G5_CSS_VER, G5_THEME_URL); ?>"></p>

<p> </p>

<p><script type="text/javascript" src="<?php echo run_replace('head_js_url', G5_THEME_JS_URL.'/jquery-1.11.2.min.js?ver='.G5_JS_VER, G5_THEME_URL); ?>"></script></p>

<p><script type="text/javascript" src="<a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>" target="_blank" rel="noopener noreferrer">https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script></a></p>

<p><script type="text/javascript" src="<a href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>" target="_blank" rel="noopener noreferrer">https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script></a></p>

<p><script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script></p>

<p> </p>

<p><script type="text/javascript" src="<?php echo run_replace('head_js_url', G5_THEME_JS_URL.'/jquery.waypoints.min.js?ver='.G5_JS_VER, G5_THEME_URL); ?>"></script></p>

<p><script type="text/javascript" src="<?php echo run_replace('head_js_url', G5_THEME_JS_URL.'/jquery.counterup.min.js?ver='.G5_JS_VER, G5_THEME_URL); ?>"></script></p>

<p><script type="text/javascript" src="<?php echo run_replace('head_js_url', G5_THEME_JS_URL.'/main.js?ver='.G5_JS_VER, G5_THEME_URL); ?>"></script></p>

<p><script type="text/javascript" src="<?php echo run_replace('head_js_url', G5_THEME_JS_URL.'/swiper.min.js?ver='.G5_JS_VER, G5_THEME_URL); ?>"></script></p>

<p>

 

</p>

<p><div class="aboutWrap page"></p>

<p><div class="box inner"></p>

<p><div class="main_title"></p>

<p><h2 class="wow fadeInDown" data-wow-delay="0.3s">전저리 여과설비, 순수 및 초순수설비, 재이용 설비, 폐수처리 설비</h2></p>

<p><p class="wow fadeInDown" data-wow-delay="0.4s">전문적이고 다양한 기술능력 보유</p></p>

<p></div></p>

<p><div class="post-slider"></p>

<p><i class="fas fa-chevron-left prev"></i></p>

<p><i class="fas fa-chevron-right next"></i></p>

<p><div class="post-wrapper"></p>

<p><a href="#" class="post">1
<span></span></a></p>

<p><a href="#" class="post">2
<span></span></a></p>

<p><a href="#" class="post">3
<span></span></a></p>

<p><a href="#" class="post">4
<span></span></a></p>

<p><a href="#" class="post">5
<span></span></a></p>

<p><a href="#" class="post">6
<span></span></a></p>

<p><a href="#" class="post">1
<span></span></a></p>

<p><a href="#" class="post">1
<span></span></a></p>

<p><a href="#" class="post">1
<span></span></a></p>

<p></div></p>

<p></div></p>

<p></div></p>

<p></div></p>

<p>

 

css

</p>

<p>.post-slider{</p>

<p>width:70%;</p>

<p>margin:0px auto;</p>

<p>position:relative;</p>

<p>}</p>

<p>.post-slider .post-wrapper{</p>

<p>width:84%;</p>

<p>height:350px;</p>

<p>margin:0px auto;</p>

<p>overflow: hidden;</p>

<p>padding:10px 0px 10px 0px;</p>

<p>}</p>

<p>.post-slider .post-wrapper .post{</p>

<p>width:300px;</p>

<p>height:200px;</p>

<p>display:inline-block;</p>

<p>background:gray;text-align: center;</p>

<p>background-color: #cccccc;</p>

<p>margin-right: 46px;</p>

<p>}</p>

<p>.post-slider .next{</p>

<p>position:absolute;</p>

<p>top:60%;</p>

<p>right:30px;</p>

<p>font-size:2em;</p>

<p>color:gray;</p>

<p>cursor: pointer;</p>

<p>}</p>

<p>.post-slider .prev{</p>

<p>position:absolute;</p>

<p>top:60%;</p>

<p>left:30px;</p>

<p>font-size:2em;</p>

<p>color:gray;</p>

<p>cursor: pointer;</p>

<p>}</p>

<p>

 

 

</p>

<p><script></p>

<p>$('.post-wrapper').slick({</p>

<p>slidesToShow:4,</p>

<p>slidesToScroll: 4,</p>

<p>autoplay: false,</p>

<p>autoplaySpeed: 2000,</p>

<p>nextArrow:$('.next'),</p>

<p>prevArrow:$('.prev'),</p>

<p>});</p>

<p></script></p>

<p>

 

 

 

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트

1.

브라우저에서 f12 누르시고 콘솔탭에 오류가 나오는지 채크하세요.

 

2.

스스로 가공하지말고 원본 예제를 그대로 사용후 작동되는걸 확인하고

조금씩 수정하세요.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인