JavaScript

lightslide 예제

piern 2019. 8. 20. 12:46

 

lightslider-master.zip
1.28MB

참고 : https://starlmh.tistory.com/entry/lightslide-%EC%98%88%EC%A0%9C

 

lightslide 예제

참고 : https://doolyit.tistory.com/147 jQuery Slider 제이쿼리 슬라이더/갤러리 - 다양한 기능의 lightslider jQuery Slider (제이쿼리 슬라이더) 중에서 swiper slider 를 많이들 쓰고 있는데요, 다소 무거운..

starlmh.tistory.com

참고 : https://doolyit.tistory.com/147

 

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

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

doolyit.tistory.com

참고 : https://sseung-fire.tistory.com/18

 

[Code] 이미지 슬라이드 - LightSlider

이미지 슬라이드 - LightSlider 1. HTML 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37..

sseung-fire.tistory.com

<!DOCTYPE html>
<html lang="en">
    <head>
    <title>lightSlider Demo</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">

    <style>
    	ul{
			list-style: none outside none;
		    padding-left: 0;
            margin: 0;
		}
        .demo .item{
            margin-bottom: 60px;
        }
		.content-slider li{
		    background-color: #ed3020;
		    text-align: center;
		    color: #FFF;
		}
		.content-slider h3 {
		    margin: 0;
		    padding: 70px 0;
		}
		.demo{
			width: 800px;
		}
    </style>
	<link rel="stylesheet"  href="https://han3283.cafe24.com/js/lightslider/css/lightslider.css"/>
   	<script src="//code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://han3283.cafe24.com/js/lightslider/js/lightslider.js"></script>
    <script>
      
    	 $(document).ready(function() {
			$("#content-slider").lightSlider({
                loop:true,
              	auto:true,
                keyPress:true
            });
            $('#image-gallery').lightSlider({
                gallery:true,
                item:1,
                thumbItem:9,
                slideMargin: 0,
                speed:500,
                auto:true,
                loop:true,
                onSliderLoad: function() {
                    $('#image-gallery').removeClass('cS-hidden');
                }  
            });
		});
    </script>
</head>
<body>
	<div class="demo">
        <div class="item">            
            <div class="clearfix" style="max-width:474px;">
                <ul id="image-gallery" class="gallery list-unstyled cS-hidden">
                    <li data-thumb="http://www.blueb.co.kr/SRC2/lightslider/image/cS-4.jpg"> 
                        <img src="http://www.blueb.co.kr/SRC2/lightslider/image/cS-4.jpg" />
                         </li>
                    <li data-thumb="http://www.blueb.co.kr/SRC2/lightslider/image/cS-3.jpg"> 
                        <img src="http://www.blueb.co.kr/SRC2/lightslider/image/cS-3.jpg" />
                         </li>
                    <li data-thumb="http://www.blueb.co.kr/SRC2/lightslider/image/cS-1.jpg"> 
                        <img src="http://www.blueb.co.kr/SRC2/lightslider/image/cS-1.jpg" />
                         </li>
                   
                </ul>
            </div>
        </div>
        <div class="item">
            <ul id="content-slider" class="content-slider">
                <li>
                    <h3>1</h3>
                </li>
                <li>
                    <h3>2</h3>
                </li>
                <li>
                    <h3>3</h3>
                </li>
                <li>
                    <h3>4</h3>
                </li>
                <li>
                    <h3>5</h3>
                </li>
                <li>
                    <h3>6</h3>
                </li>
            </ul>
        </div>

    </div>	
</body>