Search code examples
jquerycycle

jQuery cycle not working

My structure:

<div class="main">
<div class="main-contents">
<img>...</img>
<img>...</img>
<img>...</img>
<img>...</img>
<img>...</img>
</div>
</div>

And my js code:

jQuery(document).ready(function() {
    jQuery('.main .maincontents').cycle({
        fx: 'fade'
    });
});

But cycle don't working. When i check via Firebug, not seen an error. How can i fix it?

Solution

  • There is a catch in your code:

        jQuery(document).ready(function() {
        jQuery('.main .main-contents').cycle({
        //-------------^^^^^^^^^^^^^-------------change it like this
            fx: 'fade'
        });
    });

    although you can do it like this if you concern about performance:

    jQuery(document).ready(function() {
        jQuery('.main').find('.main-contents').cycle({
        //-------------^^^^^^^^^^^^^-------------change it like this
            fx: 'fade'
        });
    });

    You have not mentioned that you have included jQuery before this script or not so try using the CDN hosted script for better pageLoad performance:

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>

    then after this put all your cycle script below it.

    Try this and see if this helps you.