제이쿼리가 안먹히는 경우인가요??
관련링크
본문
라이트슬라이드 제이쿼리 소스 사용하여
슬라이드 작업중인데 자꾸 빈공백으로만 나오는데 한번봐주실 분 계실까요..??
<!-- 슬라이드 시작 -->
<style>
ul{
list-style: none outside none;
padding: 0;
margin: 0;
}
.pointslides .item{
margin-bottom: 60px;
}
.content-slider li{
background-color: #ed3020;
text-align: center;
color: #FFF;
}
.content-slider h3 {
margin: 0;
padding: 70px 0;
}
.pointslides{
width: 1200px;
height: 1000px;
margin: 0 auto;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="/js/lightslider.js"></script>
<script>
$(document).ready(function() {
$("#content-slider").lightSlider({
loop:true,
keyPress:true
});
$('#image-gallery').lightSlider({
gallery:true,
item:1,
thumbItem:9,
slideMargin: 0,
speed:500,
auto:false,
loop:true,
onSliderLoad: function() {
$('#image-gallery').removeClass('cS-hidden');
}
});
});
</script>
<!--cont1 시작-->
<div id="sub_wrap" style="padding:100px 0px; padding-bottom:150px;background-color:#000;">
<!--비용안내-->
<img class="wow fadeInDown" data-wow-delay="0.1s" src="/images/event/con01-price-200409.png">
<br><br><br><br><br><br>
<!--포인트-->
<img class="wow fadeInDown" data-wow-delay="0.1s" src="/images/event/con02-check-200409.png">
<br><br><br>
<div class="pointslides">
<div class="item">
<div class="clearfix" style="max-width:1200px;">
<ul id="image-gallery" class="gallery list-unstyled cS-hidden">
<li data-thumb="/images/event/thumb/cS-1.png">
<img src="/images/event/point01-200409.png" />
</li>
<li data-thumb="/images/event/thumb/cS-2.png">
<img src="/images/event/point02-200409.png" />
</li>
<li data-thumb="/images/event/thumb/cS-3.png">
<img src="/images/event/point03-200409.png" />
</li>
<li data-thumb="/images/event/thumb/cS-4.png">
<img src="/images/event/point04-200409.png" />
</li>
<li data-thumb="/images/event/thumb/cS-5.png">
<img src="/images/event/point05-200409.png" />
</li>
</ul>
</div>
</div>
</div>
</div>
<!--cont1 끝-->
---------------------------------
개발자도구 오류에
이런식으로 문구 나오는데 뭘 뜻하는걸까요?
Uncaught TypeError: $(...).lightSlider is not a function
at HTMLDocument.<anonymous> (event08.html:43)
at c (jquery.min.js:3)
at Object.fireWith [as resolveWith] (jquery.min.js:3)
at Function.ready (jquery.min.js:3)
at HTMLDocument.H (jquery.min.js:3)
답변 3
라이트슬라이더 함수가 없다는건데 js 결로나 해당 js가 버전 몇까지 지원하는지 확인해보세요
이런건 lightSlider를 쓰는위치전후로 console.log로 위치확인하면서
jquery 버전하고 이중선언등 확인해주십시오
<div class="pointslides"> <---슬라이트 구성은 이렇게 해놓고
$("#content-slider").lightSlider({ <--- 이것을 실행하니 에러가 납니다 지우세요
content-slider라는 아이디로 다른 페이지에서도 사용하고 있어서 넣은 것이라면
if($("#content-slider").length){
코드
}