<!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="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;
}
.demo{
width: 1000px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/lightslider.js"></script>
<script>
$(document).ready(function() {
$('#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>11
<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="img/thumb/cS-1.jpg">
<img src="img/cS-1.jpg" />
</li>
<li data-thumb="img/thumb/cS-2.jpg">
<img src="img/cS-2.jpg" />
</li>
<li data-thumb="img/thumb/cS-3.jpg">
<img src="img/cS-3.jpg" />
</li>
<li data-thumb="img/thumb/cS-4.jpg">
<img src="img/cS-4.jpg" />
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
No comments:
Post a Comment
Practice and let me know for nw code snippets