슬라이드 갤러리
페이지 정보
작성일17-03-08 14:34 조회3,652회관련링크
- 예제파일 961회 연결
본문
<!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>
<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>
