HTML работает в Fiddle, но не локально

Я пытаюсь создать этот слайдер изображений и запустить его на своей машине: http://jsfiddle.net/sachin377/2patspw2/

Страница не отображается должным образом. Кроме того, я получаю предупреждающее сообщение ActiveX при использовании IE. Пожалуйста, посмотрите это изображение:

https://i.imgur.com/l1agS2y.png

Что я делаю неправильно? Вот HTML и 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>
          <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>
  </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%;
}

$('#lightSlider').lightSlider({ это в вашем реальном коде?

— 07.08.2018 16:35

При локальном выполнении html-файла существует множество ограничений. Лучше создать веб-сайт в IIS и разместить его на http://localhost. В частности, https не будет работать, когда вы открываете сайт с протоколом file://, поэтому ваше включение jQuery просто не будет работать.

— 07.08.2018 16:35

Когда опечатки исправлены, ваш jQuery необходимо запустить в вызове document.ready или поместить в конец тела. Вы также, похоже, не можете включить библиотеку lightSlider

— 07.08.2018 16:36

@LelioFaieta: Я использовал tidy, чтобы привести в порядок разметку перед тем, как опубликовать ... похоже, он заменил символ одинарной кавычки его эквивалентом ascii.

— 07.08.2018 16:46

javascript jquery css html

07.08.2018 16:33

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Скрипты не будут запускаться, если вы открываете html-файлы прямо из файловой системы. Это проблема безопасности.

Вам понадобится веб-сервер, работающий локально на вашем компьютере, чтобы обслуживать ваши файлы.

Проверьте Мангуста. Это простой сервер для windows. Вот запись в блоге, которая поможет вам начать работу: https://eureka.ykyuen.info/2013/07/26/mongoose-simple-web-server/

07.08.2018 16:40

Ответ принят как подходящий

Вам необходимо добавить в скрипт библиотеку световых слайдеров: CSS:

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

И js:

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

Также отредактируйте это в своем коде:

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

С этим:

$('#lightSlider').lightSlider({

Вот весь отредактированный код:

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

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

07.08.2018 16:41

Помимо добавления недостающих ресурсов, вам также необходимо указать сценарий, который будет запускаться, когда документ будет готов. (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>

07.08.2018 16:53

Другие вопросы по теме

Отправка формы Ajax работает в Chrome, но не работает в Firefox

Передача методов для использования в объекте jQuery

Убедитесь, что все поля заполнены, чтобы удалить отключенный атрибут

Получить значение диапазона

Автоматический щелчок по элементу при удалении элемента

Как изменить параметры на основе другого параметра выбора в таблице?

Разница в jQuery между документом и телом

Используя TypeScript с DataTables, как мне определить правильный тип для 'this'

Как вызвать jquery-cookie из любого места на моем веб-сайте?

Проблема с jquery в активном и неактивном цвете изменения, когда я делаю продукт активным и деактивным в php jquery

HTML работает в Fiddle, но не локально

Ответы 3

Другие вопросы по теме

Похожие вопросы