답변 2개
<ul id="image-gallery" class="gallery list-unstyled cS-hidden" >
소스를 보면 빨간색 부분의 cs-hidden 부분이 문제의 원인 일 수 있어 보입니다.
슬라이더가 로딩되기 이전에 표시되는 걸 방지 하는 부분인데
로딩이 되면 cs-hidden 이라는 클래스 명을 제거 하는 스크립트를 추가 해보세요
</p>
<p>onSliderLoad: function() {
$('#image-gallery').removeClass('cS-hidden');
}</p>
<p>
사용예제
https://starlmh.tistory.com/entry/lightslide-%EC%98%88%EC%A0%9C
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 는 그밑에
더 높은 버전의
<script src="/js/jquery.1.10.2.min.js"></script> 가 선언 되어 있으므로 제거 해 주시고
<script src="/js/lightslider.js"></script> 를
<script src="/js/jquery.1.10.2.min.js"></script>밑으로 붙여 넣어 주시면 될 것 같습니다.
그리고
<ul id="image-gallery" class="gallery list-unstyled cS-hidden" >
에서 보듯이 슬라이더 아이디가 image-gallery 이니까
$("#content-slider").lightSlider({
loop:true,
keyPress:true
});
이 부분은 제거 하셔도 됩니다.
lightslider는 여러 커스터마이징 하기 꽤 유용한 플러긴입니다.
차근 차근 사용법을 익혀 두시면 나중에 많은 도움이 되실 겁니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
$('#image-gallery').lightSlider 부분 그대로 차용해서 쓰셔도 되겠네요.
lightslider의 인스톨 매뉴얼은 알고 계신 다는 가정 하에 필요한 코드 부분만 올려드린 겁니다.
onSliderLoad: function() 이 삽입되는 위치 부분 유의 해서 보시면 이해가 가실 듯 합니다.