[jquery] lightslider 제이쿼리 슬라이드 구현 예제

개인프로젝트를 하며 jquery로 이미지 슬라이드를 구현하기위해 lightslider를 이용해서 구현했다.

 

가이드

---

JQuery lightSlider

 

[GITHUB 주소] https://github.com/sachinchoolur/lightslider

GitHub - sachinchoolur/lightslider: JQuery lightSlider is a lightweight responsive Content slider with carousel thumbnails navig

 

 

플러그인 호출

---

<link rel="stylesheet" href="../css/slider.css" type="text/css">
<script type="text/javascript" src="../js/slider.js"></script>

플러그인을 호출할때는 github 주소를 직접 쓰지 말고, 위처럼 소스를 다운받아서 내부에서 호출되도록 사용해야한다.

당연히 다들 알고 있겠지만 네트워크가 안되는 환경에서는 해당 플러그인을 사용할 수 없고,

github소스는 업데이트 될 수 있으므로 알맞는 버전으로 다운받아 사용하도록 하자.

 

 

 

 

JAVASCRIPT

---

$('#image-gallery').lightSlider({
	gallery:true,
	item:1, // 대표이미지 갯수
	thumbItem:5, // thumbnail 노출될 이미지 갯수
	slideMargin: 50, // 이미지별 margin
	speed:500,
	loop:true, // 마지막사진에서 자동으로 처음으로 다시 돌아갈것인지에 대한 여부
	adaptiveHeight:true, 
	onSliderLoad: function() {
		$('#image-gallery').removeClass('cS-hidden');
	}
});

아래의 html을 작성 후 위의 javascript를 선언해주면 이미지 슬라이드는 간단하게 작성완료된다. 

 

 

 

HTML

---

<div class="item">            
	<div class="clearfix" style="max-width:474px;">
		<ul id="image-gallery" class="gallery list-unstyled cS-hidden">
			<li data-thumb="../images/thumbnail/photo01.jpg">
				<img src="../images/real/photo01.jpg" />
			</li>
			<li data-thumb="../images/thumbnail/photo02.jpg">
				<img src="../images/real/photo02.jpg" />
			</li>
			<li data-thumb="../images/thumbnail/photo03.jpg">
				<img src="../images/real/photo03.jpg" />
			</li>
			<li data-thumb="../images/thumbnail/photo04.jpg">
				<img src="../images/real/photo04.jpg" />
			</li>
			<li data-thumb="../images/thumbnail/photo05.jpg"> <!-- thumbnail 위치 -->
				<img src="../images/real/photo05.jpg" /> <!--실제파일위치 -->
			</li>
		</ul>
	</div>
</div>

주석에 표기한것과 같이 li의 자식요소인 img의 src는 이미지가 상단에 띄워질때 실제 파일의 경로를 작성해주면 되고

li의 data-thumb 속성으로는 해당 파일의 thumbnail이미지의 경로를 작성해주면 된다.

 

li의 data-thumb 속성으로 썸네일을 노출했다가, 마우스 클릭이나 온로드 이벤트시 img의 경로를 불러와 호출하게 된다.