CODEWITHSUNDEEP
javascriptjqueryjquery-cycle2
LearntoExcel
LearntoExcel

Reputation: 129

Jquery cycle2 plugin not working

I am having trouble getting the jquery cycle2 plugin to work.

The slideshow doesn't load and the images. They just appear 1 underneath each other. I don't see any console errors. I have the latest jquery(3.0).

Here is my code. By the way, I am relatively new to javascript and 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>

I am not sure why this isn't working. As this is an example that was previously given by someone. I am using wordpress by the way. It is not working in chrome nor firefox.

Upvotes: 0

Views: 1832

Answers (1)

codeandcloud
codeandcloud

Reputation: 55200

Its because you haven't specified which child HTML element you need to cycle through. Please add data-cycle-slides="> div" to your markup.

Documentation:

Cycle2 allows you to use any type of element for the slides, it's not solely for cycling images. However, images are the default slide type so to use other elements you need to override the slides option as show on this page. The slides option can be set to any valid jQuery selector. The default value is > img which is a selector to find all image elements that are immediate children of the slideshow container.

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

Upvotes: 1

Related Questions