jQuery Slider 제이쿼리 슬라이더/갤러리 - 다양한 기능의 lightslider

jQuery Slider (제이쿼리 슬라이더) 중에서 swiper slider 를 많이들 쓰고 있는데요, 다소 무거운 감이 있긴 했습니다. 또한, 슬라이더를 여러개 사용할 경우에는 자원의 사용이 많아지는듯 해서, 다른 슬라이더를 찾던중에 lightslider 라는 것을 발견했습니다

 

jquery slider 제이쿼리 슬라이더, 갤러리

 

위 그림과 같이 하단 부분에 작은이미지 (썸네일) 가 보이고, 그걸 클릭하거나 큰 사진의 좌우 이동 버튼을 클릭하거나, 스마트폰에서는 손가락으로 좌우이동이 가능한 jquery slider 입니다. 

 

jquery slider 예제, jquery 갤러리

 

그리고, 옵션만 바꿔주면 위 사진처럼 썸네일 이미지를 오른쪽으로 배치하고, 화면 이동도 상하(Vertical)로 움직이게 할 수도 있습니다

 

 

제이쿼리 슬라이더/ 제이쿼리 갤러리

 

 

또한, 위와 같이 여러개의 이미지를 임의로 세팅할 수도 있고, 아래부분에 있는 버튼처럼 다양한 함수를 제공하기 때문에 사용하기가 편리한 편입니다.

 

 

 

 

 

 

다만, 위와 같이 썸네일 이미지가 보이는 갤러리가 아니라, 큰 사진만 있고 썸네일이 없는경우에 대한 옵션이 없는듯 해서, 소스코드에 다음과 같이 옵션을 추가해 봤습니다.

 

<script>
        $(document).ready(function() {
        $("#content-slider").lightSlider({
            loop:true,
            keyPress:true
        });
        $('#image-gallery').lightSlider({
            auto:true,
            gallery:true,
            isthumb:false, // 이 부분이 제가 추가한 옵션 true 이면 썸네일을 표시하고, false 이면 표시하지 않습니다
            item:1,
            thumbItem:0,
            slideMargin: 0,         
            speed:500,
            loop:true,
            onSliderLoad: function() {
                $('#image-gallery').removeClass('cS-hidden');
            }
        });
 
    });
 
</script>

 

그런후에 lightslider.js 파일을 열고, 아래 부분에 조건문을 추가해 주면 됩니다

 

var thumb = $children.eq(i * settings.slideMove).attr('data-thumb');
 
if (settings.gallery === true) {
 
      if ( settings.isthumb === true ) // 이부분이 추가된 코드 
 
      {
 
            pagers += '<li style="width:100%;' + property + ':' + thumbWidth + 'px;' + gutter + ':' +            settings.thumbMargin + 'px"><a href="#"><img src="' + thumb + '" /></a></li>';
 
       }
 
}
 
else {
 
     pagers += '<li><a href="#">' + (i + 1) + '</a></li>';
 
}
 
 

 

 

동작이나 로딩속도등은 나름 만족할 정도입니다^^