Unable to get Lightslider to work
Nancy Oshea posted about Lightslider.
It looks great, so I thought it would be good as a learning tool to build a page using this.
Unfortunately, I can't get it to work as advertised.
Can anyone point me in the riright diresction where I'm going wrong?
My code as I took from Lightslider:
<!doctype html>
<html><head>
<meta charset="utf-8">
<title>My Test Site</title>
<link href="demo.css" rel="stylesheet" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<script>
$('#lightSlider').lightSlider({
gallery: true,
item: 1,
loop:true,
slideMargin: 0,
thumbItem: 9
});
</script>
<div class="demo">
<ul id="lightSlider">
<li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-1.jpg">
<img src="https://sachinchoolur.github.io/lightslider/img/cS-1.jpg" />
</li>
<li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-2.jpg">
<img src="https://sachinchoolur.github.io/lightslider/img/cS-2.jpg" />
</li>
<li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-3.jpg">
<img src="https://sachinchoolur.github.io/lightslider/img/cS-3.jpg" />
</li>
<li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-4.jpg">
<img src="https://sachinchoolur.github.io/lightslider/img/cS-4.jpg" />
</li>
<li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-5.jpg">
<img src="https://sachinchoolur.github.io/lightslider/img/cS-5.jpg" />
</li>
<li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-6.jpg">
<img src="https://sachinchoolur.github.io/lightslider/img/cS-6.jpg" />
</li>
<li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-7.jpg">
<img src="https://sachinchoolur.github.io/lightslider/img/cS-7.jpg" />
</li>
<li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-8.jpg">
<img src="https://sachinchoolur.github.io/lightslider/img/cS-8.jpg" />
</li>
<li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-9.jpg">
<img src="https://sachinchoolur.github.io/lightslider/img/cS-9.jpg" />
</li>
<li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-10.jpg">
<img src="https://sachinchoolur.github.io/lightslider/img/cS-10.jpg" />
</li>
<li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-11.jpg">
<img src="https://sachinchoolur.github.io/lightslider/img/cS-12.jpg" />
</li>
<li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-13.jpg">
<img src="https://sachinchoolur.github.io/lightslider/img/cS-13.jpg" />
</li>
</ul>
</div>
</body>
</html>
And my CSS:
@charset "utf-8";
/* CSS Document */
.demo {
width:450px;
}
ul {
list-style: none outside none;
padding-left: 0px;
margin-bottom:0;
}
li {
display: block;
float: left;
margin-right: 6px;
cursor:pointer;
}
img {
display: block;
height: auto;
max-width: 100%;
}
If you want a look at what I get. My Test Site
AdChoices