Unable to get Lightslider to work

Report · Sep 13, 2018

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>

</head>

<body>

$('#lightSlider').lightSlider({

gallery: true,

item: 1,

loop:true,

slideMargin: 0,

thumbItem: 9

});

</script>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</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

Report · Sep 13, 2018

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:

<link type="text/css" rel="stylesheet" href="css/lightslider.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/lightslider.js"></script>

I do see jquery on your page, but you need to ensure you upload that css and js file for lightslider.

Report · Sep 13, 2018

Thanks Ben.

At the top of my page I have:

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.

Report · Sep 13, 2018

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.

<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>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Adobe Community

Unable to get Lightslider to work

1 Correct answer