Highlighted

Unable to get Lightslider to work

Contributor ,
Sep 13, 2018

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

Adobe Community Professional
Correct answer by Ben M | Adobe Community Professional

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:

  1. <link type="text/css" rel="stylesheet" href="css/lightslider.css" />  
  2. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  3. <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.

Views

655

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Unable to get Lightslider to work

Contributor ,
Sep 13, 2018

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

Adobe Community Professional
Correct answer by Ben M | Adobe Community Professional

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:

  1. <link type="text/css" rel="stylesheet" href="css/lightslider.css" />  
  2. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  3. <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.

Views

656

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Sep 13, 2018 0
Adobe Community Professional ,
Sep 13, 2018

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:

  1. <link type="text/css" rel="stylesheet" href="css/lightslider.css" />  
  2. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  3. <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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 13, 2018 1
Contributor ,
Sep 13, 2018

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 13, 2018 0
Adobe Community Professional ,
Sep 13, 2018

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>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 13, 2018 1