Copy link to clipboard
Copied
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
Assuming this is the lightslider ( JQuery lightSlider​ ), I don't see either the CSS or the JS files linked to your test page. From that page these lines should exist:
I do see jquery on your page, but you need to ensure you upload that css and js file for lightslider.
Copy link to clipboard
Copied
Assuming this is the lightslider ( JQuery lightSlider​ ), I don't see either the CSS or the JS files linked to your test page. From that page these lines should exist:
I do see jquery on your page, but you need to ensure you upload that css and js file for lightslider.
Copy link to clipboard
Copied
Thanks Ben.
At the top of my page I have:
<link href="demo.css" rel="stylesheet" type="text/css">
demo being my uploaded CSS, which I haven't changed in any way, and it's deff attached.
Deff got <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> in there.
I've now added <script src="js/lightslider.js"></script> as you suggested but still no luck. I must be doing something wrong.
The HTML file that I uploaded <div class="demo"> contains all the image links.
I kept the file names as is.
One problem I've found from your help is the .js linking to my HTML. I'll repost when I've got to the bottom of it.
Copy link to clipboard
Copied
Here is the lightslider CSS hosted on a CDN. Copy and paste into your <head> tag.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.5/css/lightslider.min.css">
jQuery 1 is too old. The current version is 3 which you should be using. Replace your jQuery with this one, also on a CDN.
<!--latest jQuery 3-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous">
Finally, under your jQuery script, add the lightslider JS.
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.5/js/lightslider.min.js" defer></script>