Fiddle demonstrates HTML functionality, while local testing is unsuccessful

Currently, I am in the process of creating an image slider and attempting to run it on my personal computer. However, upon doing so, I have encountered a problem where the page is not rendering correctly. Additionally, I receive an ActiveX warning message when using IE. For reference, please take a look at this screenshot: https://i.sstatic.net/u5sSg.png

Could someone kindly point out what mistake I might be making with the following HTML and CSS:

Slider.html

<!DOCTYPE html>
<html>
  <head>

    <title></title>

    <link rel="stylesheet" type="text/css" href="/css/style.css" />

    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>

    <script type="text/javascript">
        $(&#39;#lightSlider&#39;).lightSlider({
                gallery: true,
                item: 1,
                loop: true,
                slideMargin: 0,
                thumbItem: 9
        });

    </script>
  </head>

  <body>  
    <div>
      <div class="demo">
        <ul id="lightSlider">
          <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-1.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg" />
          </li>
          ... <!-- Additional list items removed for brevity -->
        </ul>
      </div>
    </div>
  </body>
</html>

css/style.css

.demo {
    width:420px;
}
ul {
    list-style: none outside none;
    padding-left: 0;
    margin-bottom:0;
}
li {
    display: block;
    float: left;
    margin-right: 6px;
    cursor:pointer;
}
img {
    display: block;
    height: auto;
    max-width: 100%;
}

Answer №1

To include the lightslider library in your script, follow these steps:

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/css/lightslider.min.css">

Additionally, add the following JS code to incorporate lightslider:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/js/lightslider.min.js"></script>

Don't forget to update this part of your code:

$(&#39;#lightSlider&#39;).lightSlider({

Make sure it reads like this:

$('#lightSlider').lightSlider({

Here is the finalized code with all the necessary edits:

<!DOCTYPE html>
<html>
  <head>

    <title></title>

    <link rel="stylesheet" type="text/css" href="/css/style.css" />
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/css/lightslider.min.css">

  </head>

  <body>  
    <div>
      <div class="demo">
        <ul id="lightSlider">
          <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-1.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg" />
          </li>
          <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-2.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg" />
          </li>
          <!-- Additional list items here -->
        </ul>
      </div>
    </div>

    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/js/lightslider.min.js"></script>
    <script type="text/javascript">
        $('#lightSlider').lightSlider({
                gallery: true,
                item: 1,
                loop: true,
                slideMargin: 0,
                thumbItem: 9
        });

    </script>

  </body>
</html>

Answer №2

If you try to run scripts by directly opening HTML files from your file system, they will not execute due to security concerns.

In order to run the scripts, you must have a local webserver set up on your computer to serve the files.

You can use Mongoose, a simple server for windows. For guidance on getting started, check out this blog post:

Answer №3

Furthermore, beyond simply adding the necessary resources, it is crucial to also define the script that should be executed upon the completion of document loading. (https://learn.jquery.com/using-jquery-core/document-ready/)

.demo {
  width: 420px;
}

ul {
  list-style: none outside none;
  padding-left: 0;
  margin-bottom: 0;
}

li {
  display: block;
  float: left;
  margin-right: 6px;
  cursor: pointer;
}

img {
  display: block;
  height: auto;
  max-width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/js/lightslider.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/css/lightslider.min.css" rel="stylesheet" />

<script type="text/javascript>
  $(document).ready(function() {
    $("#lightSlider").lightSlider({
      gallery: true,
      item: 1,
      loop: true,
      slideMargin: 0,
      thumbItem: 9
    });
  });
</script>


<div>
  <div class="demo">
    <ul id="lightSlider">
      <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-1.jpg">
        <img src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg" />
      </li>
      <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-2.jpg">
        <img src="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg" />
      </li>
      <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-3.jpg">
        <img src="http://sachinchoolur.github.io/lightslider/img/cS-3.jpg" />
      </li>
      <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-4.jpg">
        <img src="http://sachinchoolur.github.io/lightslider/img/cS-4.jpg" />
      </li>
      <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-5.jpg">
        <img src="http://sachinchoolur.github.io/lightslider/img/cS-5.jpg" />
      </li>
      <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-6.jpg">
        <img src="http://sachinchoolur.github.io/lightslider/img/cS-6.jpg" />
      </li>
      <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-7.jpg">
        <img src="http://sachinchoolur.github.io/lightslider/img/cS-7.jpg" />
      </li>
      <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-8.jpg">
        <img src="http://sachinchoolur.github.io/lightslider/img/cS-8.jpg" />
      </li>
      <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-9.jpg">
        <img src="http://sachinchoolur.github.io/lightslider/img/cS-9.jpg" />
      </li>
      <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-10.jpg">
        <img src="http://sachinchoolur.github.io/lightslider/img/cS-10.jpg" />
      </li>
      <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-11.jpg">
        <img src="http://sachinchoolur.github.io/lightslider/img/cS-12.jpg" />
      </li>
      <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-13.jpg">
        <img src="http://sachinchoolur.github.io/lightslider/img/cS-13.jpg" />
      </li>
    </ul>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to stop the react-router from causing the page to refresh

Need assistance with React Router issue I'm working on a project in reactJs using react-router-dom v5. I have set up a default route for routing. <Redirect to={"someComponent"}/> The problem is that when I refresh the page, it auto ...

What is the best way to isolate particular components of an argument and store them in separate variables?

Currently, I am facing a challenge in extracting the name and id of an emoji from a discord argument using discord.js. The input provided to me is <:hack_wump:670702611627769876>, and my goal is to retrieve var id = '670702611627769876' alo ...

leveraging array elements in the data and label properties of a chart.js chart

I would like to assign the values of an array to the data and label fields within a chart.js dataset. Below is the code executed upon successfully fetching JSON data using an AJAX call. The fetched JSON data is then stored in an array. Data = jQuery.pars ...

The execution of the return statement in the catch block is unsuccessful

Here is a simple example that results in an error because the variable tl was not specified: function allmatches() { SpreadsheetApp.getActive().getSheetByName('data').getRange('A1').setValue(tl) } To track any errors that occur durin ...

What is the reason behind the array.map() function not altering the original array?

I attempted to increment each element of my array by one, but was having trouble. Here is what I tried: myArray=[1,2,3] myArray.map(a=>a+=1) // also tried a++ and a=a+1 console.log(myArray) // returns [ 1 , 2 , 3 ] Unfortunately, this method did not w ...

How to Reference a Local File in PHP using Zend Framework for jQuery's .Load Function

I'm currently working on a PHP Zend framework website and I'm trying to link to a local file. The file structure is as follows: public_html/application/views/index/filename1.phtml Within filename1.phtml, I want to make a jQuery call to load a ...

Image Positioned Outside Border in HTML

I'm working on creating a personalized homepage for my browser and I want to display 3 images with captions evenly spaced within a divider. Although everything seems to be in place, the border of the outermost divider is not covering the images. How c ...

Nativescript encountered an issue while attempting to generate the application. The module failed to load: app/main.js

I'm currently experimenting with the sample-Groceries application, and after installing NativeScript and angular 2 on two different machines, I encountered the same error message when trying to execute: tns run android --emulator While IOS operations ...

Troubleshooting: WordPress failing to launch Bootstrap Modal

I recently transformed my PHP website into a WordPress theme, but unfortunately, I am facing an issue with my Bootstrap modal not opening in WordPress. ***Header.php*** <a id="modal_trigger" href="#modal" class="sign-in-up"><i class="fa fa-user ...

The $watch feature in AngularJS does not function properly within a directive when a controller is used to update data

I created a custom directive and also have a controller to bind data to the directive. The data is retrieved from the server and bound to the directive. However, I noticed that the data in the directive on the page does not update when I change the scope ...

Experiencing an issue while attempting to retrieve JSON data from an MVC Controller, with the error message of net::ERR_IN

I am attempting to retrieve JSON data from my controller for use in jQuery. The code I have written seems correct, as visiting the URL in my browser returns the JSON data, confirming that the controller is functioning properly. However, I encounter the fol ...

php failure to execute included file

Hey there! I'm currently facing an issue with including a file that contains all of my 'head' information. My goal is to simplify and streamline my page by breaking it down. In my index.php file, here's what I did: <?php include & ...

How to access an element inside a div using the eq() method

Within my #img_wrapper, I have multiple pictures each enclosed in a link: <div id="img_wrapper"> <a href="img1.jpg" style="display: none;"> <img src="img1.jpg" /> </a> <a href="img2.jpg" style="display: none;"> &l ...

Is it possible for JavaScript to style two different phone number elements on a single page?

After successfully creating a script that auto formats an element by ID on my website, I encountered an issue with multiple forms. The script works perfectly for a single element, but when I attempted to change it to target elements by class name using get ...

What is the process for implementing a component in antdesign when using vue-cli and vue 3?

I followed the instructions provided in the documentation here. These are the steps I took: vue create example-app cd example-app I selected the vue 3 preset. Then, I made changes to the script in main.js import Vue from 'vue'; import Button f ...

What is the best way to style odd and even divs in CSS?

I am struggling with applying different CSS styles to the odd and even divs in my code. The current implementation I have does not seem to be working as expected. I specifically want the styling to target only the direct children of the div, rather than an ...

What is the best way to calculate the total of a field with matching Project and Employee names?

My task involves grouping data from an Array of objects by Project Name and Employee Name, whereby existing projects and employees have their hours added together. projects = [ { "project": { "id": 1, "name": "M ...

A problem has occurred in Next.js where FileReader is not recognized and is causing a Reference

Exploring the latest features of Next.js 13 with the /app directory, I encountered an issue while using the FileReader in a basic client-side component that manages an input form. Here is a brief overview of the code: "use client"; import React, ...

Prevent the top of the fifth row from displaying on mobile devices when the first four rows are hidden

My personal website features a collection of user-generated stories, with only the first 4 rows of each story visible in a fading text gradient from black to white. There is a "show more/less" button to reveal or hide the full content. While this layout ...

Exploring the inheritance of directives and controllers within AngularJS

I'm struggling to grasp the concept of inheriting a parent controller from a directive. In my setup, I have a simple example with a controller named MainCrtl. This controller is responsible for creating and removing an array of directives called inner ...