Плагин Jquery cycle2 не работает

У меня возникли проблемы с работой плагина jquery cycle2.

Слайд-шоу не загружается и изображения. Они просто появляются 1 друг под другом. Я не вижу никаких ошибок консоли. У меня есть последняя версия jquery (3.0).

Вот мой код. Кстати, я относительно новичок в javascript и jquery:

$('document').ready(function($) {
  $('#slideshow').cycle({
    timeout: 0, // no autoplay
    fx: 'fade', //
    next: '#next',
    prev: '#prev'
  });
});
<head>
  <meta charset="<?php bloginfo( 'charset' ); ?>" />
  <meta name="viewport" content="width=device-width" />

  <link rel="profile" href="http://gmpg.org/xfn/11" />
  <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

  <script type="text/javascript" src="<?php echo      get_template_directory_uri();?>/assets/scripts/jquery.min.js"></script>

  <!-- Cycle2 -->
  <script type="text/javascript" src="<?php echo     get_template_directory_uri();?>/assets/scripts/jquery.cycle2.min.js"></script>

</head>

<div id="slideshow">
  <div style="width:250px; height:150px; background:red;"></div>
  <div style="width:250px; height:150px; background:blue;"></div>
  <div style="width:250px; height:150px; background:green;"></div>
  <div style="width:250px; height:150px; background:yellow;">
  </div>
  <div id="prev" style="float:left;">PREV</div>
  <div id="next" style="float:right;">NEXT</div>

Я не уверен, почему это не работает. Поскольку это пример, который ранее был кем-то приведен. Я, кстати, использую wordpress. Не работает ни в хроме, ни в фаерфоксе.


javascript jquery jquery-cycle2
person LearntoExcel    schedule 21.06.2016    source источник
comment
Большинство тем уже включают jQuery.js. Вы должны использовать правильный метод enqueue_script. Лучше всего предположить, что вторая версия стирает загружаемый вами плагин ... но это также должно вызывать ошибку. Что касается укладки изображений... используйте css по умолчанию, чтобы исправить это.   -  person charlietfl    schedule 21.06.2016
comment
Привет, если я удалю jquery.js из головы, я получаю консольную ошибку jquery не определен, и эта ошибка исходит от плагина цикла, который объявляет jquery. И укладка изображений должна быть с помощью css, сам плагин должен создавать слайд-шоу.   -  person LearntoExcel    schedule 21.06.2016
comment
Но именно поэтому вы должны правильно поставить в очередь... есть ли на странице еще один jQuery.js? Вы не можете включить файл плагина до загрузки jQuery.js, и если он загрузится дважды, он уничтожит плагины, зарегистрированные в первой версии.   -  person charlietfl    schedule 21.06.2016
comment
Привет, я относительно новичок в javascript и разработке веб-сайтов в целом, поэтому надеюсь, что правильно вас понял. В загружаемом заголовке нет других jquery.js/jquery.min.js. Я зарегистрировал скрипт в functions.php моей темы с этим кодом   -  person LearntoExcel    schedule 21.06.2016
comment
function wpb_adding_styles() { wp_register_script('my_script_name', get_stylesheet_directory_uri(). '/assets/scripts/jquery.cycle2.min.js'); wp_enqueue_script('my_script_name'); } add_action('wp_enqueue_scripts', 'wpb_adding_styles');   -  person LearntoExcel    schedule 21.06.2016
comment
Я ценю вашу помощь, кстати   -  person LearntoExcel    schedule 21.06.2016
comment
Скрипты также могут находиться в <body> после всего содержимого и перед закрывающим тегом </body>   -  person charlietfl    schedule 21.06.2016
comment
Извините, но я не вижу других загружаемых скриптов jquery. Кроме того, разве это не выдаст ошибку в консоли?   -  person LearntoExcel    schedule 21.06.2016
comment
Хорошо... просто пытаюсь быть уверенным   -  person charlietfl    schedule 21.06.2016
comment
У меня есть последняя версия jquery (3.0). отправляет код со ссылкой на более старую версию   -  person Kevin B    schedule 21.06.2016
comment
LOL, я просто изменил код, чтобы посмотреть, будет ли работать более старый jquery, и забыл изменить его обратно   -  person LearntoExcel    schedule 21.06.2016

Ответы (1)


arrow_upward
1
arrow_downward

Это потому, что вы не указали, какой дочерний элемент HTML вам нужно прокручивать. Пожалуйста, добавьте data-cycle-slides="> div" к вашей разметке.

Документация:

Cycle2 позволяет использовать элементы любого типа для слайдов, а не только для циклических изображений. Однако изображения являются типом слайдов по умолчанию, поэтому для использования других элементов вам необходимо переопределить параметр слайдов, как показано на этой странице. Параметр слайдов может быть установлен на любой допустимый селектор jQuery. Значение по умолчанию > img, которое является селектором для поиска всех элементов изображения, которые являются непосредственными дочерними элементами контейнера слайд-шоу.

Скрипт: https://jsfiddle.net/codeandcloud/tf24noy6/

Snippet 

<!DOCTYPE html>
<html>
<head>
    <title>Cycle2 Plugin - Malsup by codeandcloud</title>
    <script type="text/javascript" src="//code.jquery.com/jquery-3.0.0.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.js"></script>
    <title>Cycle2 Plugin - Malsup by codeandcloud</title>
    <script type='text/javascript'>
        //<![CDATA[

        $('document').ready(function ($) {
            $('#slideshow').cycle({
                timeout: 0, // no autoplay
                fx: 'fade', //
                next: '#next',
                prev: '#prev'
            });
        });

        //]]>
    </script>
</head>
<body>
    <div style="width: 250px">
        <div id="slideshow" data-cycle-slides="> div">
            <div style="width:250px; height:150px; background:red;"></div>
            <div style="width:250px; height:150px; background:blue;"></div>
            <div style="width:250px; height:150px; background:green;"></div>
            <div style="width:250px; height:150px; background:yellow;"></div>
        </div>
        <div id="prev" style="float:left;">PREV</div>
        <div id="next" style="float:right;">NEXT</div>
    </div>
</body>
</html>

person naveen    schedule 21.06.2016
comment
Спасибо, Навин, но у меня это тоже не работает. Результат, который я получаю, - это если вы возьмете свою скрипку и измените язык на Javascript 1.7, а затем запустите. Я использую последнюю версию хрома. - person LearntoExcel; 21.06.2016
comment
jquery — это библиотека JavaScript. Вам нужно включить jQuery, потому что cycle2 — это плагин jQuery, и он зависит от jquery. - person naveen; 21.06.2016
comment
Привет, Навин, спасибо за помощь, но я не понимаю. Я думал, что включил jquery, как вы можете видеть в заголовке. У меня есть соответствующий файл в папке. - person LearntoExcel; 21.06.2016
comment
‹script type=text/javascript src=‹?php echo get_template_directory_uri();?›/assets/scripts/jquery.min.js›‹/script› - person LearntoExcel; 21.06.2016
comment
удалить <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> из верхней части страницы. выше header - person naveen; 21.06.2016
comment
Привет навин. Я сделал это уже. Это вставил редактор, а не я. - person LearntoExcel; 21.06.2016
comment
Вы уверены, что размещаете $('#slideshow').cycle внутри тега head или в теге body после закрывающего тега элемента div id="slideshow"? - person naveen; 21.06.2016
comment
Слайд-шоу div id находится в теле. Цикл $('#slideshow').cycle был помещен прямо перед /body. - person LearntoExcel; 21.06.2016
comment
Навин, извините за беспокойство, но я загрузил скрипт. Оказывается, мне не хватило одной буквы в моей функции. У меня есть дополнительная проблема. Теперь я получаю сообщение об ошибке консоли: [цикл] завершен; ноль элементов, найденных селектором. Вы были бы знакомы с этим? - person LearntoExcel; 22.06.2016