Почему мой бесконечный код карусели ломает мою веб-страницу?

Question

Я купил шаблон Theme Forest, который я использую для создания веб-сайта. Одна из функций, которую я хотел включить, в частности, на странице about.html веб-сайта, - это карусель с бесконечной прокруткой для отображения клиентских логотипов. Я нашел хороший пример карусели, которую я хотел использовать здесь и следовал инструкциям.

Я добавил следующий HTML-код в тело моей страницы about.html:

    <div class="container">
  <section class="customer-logos slider">
    <div class="slide"><img src="images/about/amazon.png"></div>
    <div class="slide"><img src="images/about/bbc.png"></div>
    <div class="slide"><img src="images/about/bbc2.png"></div>
    <div class="slide"><img src="images/about/bbcnews.jpg"></div>
    <div class="slide"><img src="images/about/bbcwales.png"></div>
    <div class="slide"><img src="images/about/itv.png"></div>
    <div class="slide"><img src="images/about/kewgardens.png"></div>
    <div class="slide"><img src="images/about/rada.jpg></div>
  </section>
</div>

Я скачал файл CSS и включил его в мои index.html и about.html, где другой CSS выглядит следующим образом:

<link rel="stylesheet" href="stylesheets/bootstrap.css">
    <link rel="stylesheet" href="stylesheets/elements.css">
    <link rel="stylesheet" href="stylesheets/sinister.css">
    <link rel="stylesheet" href="stylesheets/slimmenu.css">
    <link rel="stylesheet" href="stylesheets/main.css">
    <link rel="stylesheet" href="stylesheets/main-bg.css">
    <link rel="stylesheet" href="stylesheets/main-responsive.css">
    <link rel="stylesheet" href="stylesheets/infinite-slider.css">

Я добавил код JavaScript в файл с именем carousel.js и обеспечил ссылку на файл js на своей странице about.html:

<script src="javascripts/libs/common.js"></script>
    <script src="javascripts/libs/bootstrap.min.js"></script>
    <script src="javascripts/custom/main.js"></script>
    <script src="javascripts/custom/elements.js"></script>
    <script src="javascripts/custom/carousel.js"></script>

Затем я добавил следующие ссылки на веб-страницу, где находится моя карусель (about.html):

<script src="javascripts/libs/common.js"></script>
    <script src="javascripts/libs/bootstrap.min.js"></script>
    <script src="javascripts/custom/main.js"></script>
    <script src="javascripts/custom/elements.js"></script>
    <script src="javascripts/custom/carousel.js"></script>
    <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

И теперь я закончила с тем, что моя страница о загрузке вообще не загружалась, как вы можете видеть здесь . Когда я впервые попробовал сделать это на своем локальном компьютере, без загрузки файлов через FTP, веб-страница (about.html) работала, но логотипы отображались горизонтально и не прокручивались.

Обычно я могу обойтись с основами, но я явно что-то упускаю, или, возможно, код, который я пытаюсь реализовать, каким-то образом конфликтует с шаблоном?

Answer 1

Это потому что вы получаете Uncaught TypeError: jQuery.easing[jQuery.easing.def] is not a function в вашем файле common.js. Компилятор javaScript прекращает выполнение, когда он обнаружил ошибку (по этой причине ваш загрузчик продолжает загружаться), вы можете увидеть то же самое, нажав f12 -> console. Вот еще немного информации о том, как решить эту проблему.

перейдите на javaScript/libs/common.js, найдите jQuery.easing[jQuery.easing.def] и устраните ошибку.