스크립트
< 자료공유 < 스크립트
스크립트자료실

슬라이드 갤러리

페이지 정보

작성일17-03-08 14:34 조회1,747회

본문

<!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="">
    <link rel="stylesheet"  href="http://madalla.kr/script/slide5/css/lightslider.css"/>
    <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>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://madalla.kr/script/slide5/js/lightslider.js"></script>
    <script>
      $(document).ready(function() {
   $("#content-slider").lightSlider({
                loop:true,
                keyPress:true
            });
            $('#image-gallery').lightSlider({
                gallery:true,
                item:1,
                thumbItem:6,
                slideMargin: 0,
                speed:500,
                auto:true,
                loop:true,
                onSliderLoad: function() {
                    $('#image-gallery').removeClass('cS-hidden');
                } 
            });
  });
    </script>
</head>
<body>
<center>
 <div class="demo">
        <div class="item">           
            <div class="clearfix" style="max-width:718px;">
                <ul id="image-gallery" class="gallery list-unstyled cS-hidden">
                    <li data-thumb="http://madalla.kr/script/slide5/image/thumb/1.jpg">
                        <img src="http://madalla.kr/script/slide5/image/1.jpg" />
                         </li>
                    <li data-thumb="http://madalla.kr/script/slide5/image/thumb/2.jpg">
                        <img src="http://madalla.kr/script/slide5/image/2.jpg" />
                         </li>
                    <li data-thumb="http://madalla.kr/script/slide5/image/thumb/3.jpg">
                        <img src="http://madalla.kr/script/slide5/image/3.jpg" />
                         </li>
                    <li data-thumb="http://madalla.kr/script/slide5/image/thumb/4.jpg">
                        <img src="http://madalla.kr/script/slide5/image/4.jpg" />
                         </li>
                    <li data-thumb="http://madalla.kr/script/slide5/image/thumb/5.jpg">
                        <img src="http://madalla.kr/script/slide5/image/5.jpg" />
                         </li>
                    <li data-thumb="http://madalla.kr/script/slide5/image/thumb/6.jpg">
                        <img src="http://madalla.kr/script/slide5/image/6.jpg" />
                         </li>
                
                </ul>
            </div>
        </div>
     
    </div> 
</body>

 

  • 페이스북으로 보내기
  • 트위터로 보내기
  • 구글플러스로 보내기