silck slider 슬릭 슬라이더 질문드립니당

권혜린 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2023.07.08 13:34:56 853 (180.♡.♡.132)

답변 1

본문

안녕하세여 ㅠㅠ

코딩이 많이 아직 서툴어요

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

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


<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
 
<link rel="stylesheet" href="<?php echo G5_THEME_CSS_URL; ?>/mainStyle.css">
<link rel="stylesheet" href="<?php echo G5_THEME_CSS_URL; ?>/common/common.css">
<link rel="stylesheet" href="<?php echo run_replace('head_css_url', G5_THEME_CSS_URL.'/style.css?ver='.G5_CSS_VER, G5_THEME_URL); ?>">
<link rel="stylesheet" href="<?php echo run_replace('head_css_url', G5_THEME_CSS_URL.'/layout.css?ver='.G5_CSS_VER, G5_THEME_URL); ?>">
<link rel="stylesheet" href="<?php echo run_replace('head_css_url', G5_THEME_CSS_URL.'/contents.css?ver='.G5_CSS_VER, G5_THEME_URL); ?>">
<link rel="stylesheet" href="<?php echo run_replace('head_css_url', G5_THEME_CSS_URL.'/animate.css?ver='.G5_CSS_VER, G5_THEME_URL); ?>">
<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); ?>">
 
<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>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
 
<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>
<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>
<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>
<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>


<div class="aboutWrap page">
<div class="box inner">
<div class="main_title">
<h2 class="wow fadeInDown" data-wow-delay="0.3s">전저리 여과설비, 순수 및 초순수설비, 재이용 설비, 폐수처리 설비</h2>
<p class="wow fadeInDown" data-wow-delay="0.4s">전문적이고 다양한 기술능력 보유</p>
</div>
<div class="post-slider">
<i class="fas fa-chevron-left prev"></i>
<i class="fas fa-chevron-right next"></i>
<div class="post-wrapper">
<a href="#" class="post">1<br/><span></span></a>
<a href="#" class="post">2<br/><span></span></a>
<a href="#" class="post">3<br/><span></span></a>
<a href="#" class="post">4<br/><span></span></a>
<a href="#" class="post">5<br/><span></span></a>
<a href="#" class="post">6<br/><span></span></a>
<a href="#" class="post">1<br/><span></span></a>
<a href="#" class="post">1<br/><span></span></a>
<a href="#" class="post">1<br/><span></span></a>
</div>
</div>
</div>
</div>

css


.post-slider{
width:70%;
margin:0px auto;
position:relative;
}
.post-slider .post-wrapper{
width:84%;
height:350px;
margin:0px auto;
overflow: hidden;
padding:10px 0px 10px 0px;
}
.post-slider .post-wrapper .post{
width:300px;
height:200px;
display:inline-block;
background:gray;text-align: center;
background-color: #cccccc;
margin-right: 46px;
}
.post-slider .next{
position:absolute;
top:60%;
right:30px;
font-size:2em;
color:gray;
cursor: pointer;
}
.post-slider .prev{
position:absolute;
top:60%;
left:30px;
font-size:2em;
color:gray;
cursor: pointer;
}


<script>
$('.post-wrapper').slick({
slidesToShow:4,
slidesToScroll: 4,
autoplay: false,
autoplaySpeed: 2000,
nextArrow:$('.next'),
prevArrow:$('.prev'),
});
</script>