Сова Карусель - пустая страница

Я не могу заставить работать Owl Carousel. Я не вижу, что я сделал неправильно, кто-нибудь может помочь? Я уверен, что это что-то простое. Просто для подтверждения я подтвердил, что все ссылки на файлы .css и .js работают правильно. Я просто получаю пустую страницу каждый раз.

Это тот, который я пытаюсь реализовать:

http://www.owlcarousel.owlgraphic.com/demos/rtl.html

Мой код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>


<link rel="stylesheet" href="owl.carousel.min.css">
<link rel="stylesheet" href="owl.theme.default.min.css">

<script>
$(document).ready(function(){
  $(".owl-carousel").owlCarousel();
});
</script>

<script>
$('.owl-carousel').owlCarousel({
    rtl:true,
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})
</script>


<body>



<div class="owl-carousel">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
    <div class="item"><h4>7</h4></div>
    <div class="item"><h4>8</h4></div>
    <div class="item"><h4>9</h4></div>
    <div class="item"><h4>10</h4></div>
    <div class="item"><h4>11</h4></div>
    <div class="item"><h4>12</h4></div>
</div>


<script src="jquery-1.11.3.min.js"></script>
<script src="owl.carousel.min.js"></script>

</body>
</html>

jquery css owl-carousel
person IVCatalina    schedule 19.08.2015    source источник
comment
Ошибки в консоли есть? Каким образом это «не работает»?   -  person ahoffner    schedule 20.08.2015
comment
Это не работает, так как это просто пустая страница. Вообще ничего не показывает.   -  person IVCatalina    schedule 20.08.2015
comment
Я получаю следующее сообщение об ошибке: «ReferenceError: $ не определено»   -  person IVCatalina    schedule 20.08.2015
comment
Ссылка на jquery первая?   -  person Dan-Levi Tømta    schedule 20.08.2015

Ответы (3)


arrow_upward
2
arrow_downward

У вас есть код, который зависит от запуска jQuery до того, как вы ссылаетесь на jQuery, это то, что на самом деле означает «ReferenceError: $ is notdefined».

Смотри сюда:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Untitled Document</title>
        <link rel="stylesheet" href="owl.carousel.min.css">
        <link rel="stylesheet" href="owl.theme.default.min.css">
    </head>
    <body>
    <div class="owl-carousel">
        <div class="item"><h4>1</h4></div>
        <div class="item"><h4>2</h4></div>
        <div class="item"><h4>3</h4></div>
        <div class="item"><h4>4</h4></div>
        <div class="item"><h4>5</h4></div>
        <div class="item"><h4>6</h4></div>
        <div class="item"><h4>7</h4></div>
        <div class="item"><h4>8</h4></div>
        <div class="item"><h4>9</h4></div>
        <div class="item"><h4>10</h4></div>
        <div class="item"><h4>11</h4></div>
        <div class="item"><h4>12</h4></div>
    </div>
    <script src="jquery-1.11.3.min.js"></script>
    <script src="owl.carousel.min.js"></script>
    <script>
    $(document).ready(function(){
        $('.owl-carousel').owlCarousel({
            rtl:true,
            loop:true,
            margin:10,
            nav:true,
            responsive:{
                0:{
                    items:1
                },
                600:{
                    items:3
                },
                1000:{
                    items:5
                }
            }
        })
    });
    </script>
    </body>
</html>

Обратите внимание, где находится <script src="jquery-1.11.3.min.js"></script>. Весь код, который зависит от jQuery, находится после.

person Dan-Levi Tømta    schedule 19.08.2015
comment
Рад помочь вам! Обратите внимание на небольшие корректировки, которые я также внес в ваш код. Я удалил первое вхождение $(".owl-carousel").owlCarousel();. Это нужно только один раз. И я переместил весь JavaScript туда, где вы выполняете весь свой код после того, как документ готов. Функция $(document).ready();. - person Dan-Levi Tømta; 20.08.2015
comment
И, пожалуйста, если вы считаете мой ответ самым правильным, выберите его как правильный и проголосуйте за него. Мне очень нужны эти голоса, потому что я был ленив. хе-хе - person Dan-Levi Tømta; 20.08.2015
comment
Готово! Я попытался сделать это сразу, но он сказал мне, что я должен ждать так много минут. Теперь за него проголосовали! :) - person IVCatalina; 20.08.2015

arrow_upward
0
arrow_downward

Добавляйте скрипты в ‹head> перед выполнением другого кода скрипта, потому что код из "$(document).ready()" и далее использует библиотеки jQuery и Own Carousel.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="jquery-1.11.3.min.js"></script>
<script src="owl.carousel.min.js"></script>
</head>
person Chitrang    schedule 19.08.2015

arrow_upward
0
arrow_downward

@Chitrang / @all Вот несколько ответов, почему бы не написать ‹script› в блоке ‹head›‹/head›.

См. Ссылку: "Скрипт" не в "голове" в порядке?

приветствует.

person koby    schedule 27.08.2015