3 Replies Latest reply on Sep 13, 2018 3:06 PM by Nancy OShea

    Unable to get Lightslider to work

    BigDingus Level 1

      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