Question

I have been writing a jQuery cycle plugin.

Firstly, the animation never happens. Each “slide” sits there for eight seconds by default and never then “pops” to the next image with no transition. Below is my code. I ran it through JSLint and the only thing that came up was that options is never used on line 103. I’m guessing that block of code has something to do with why my plugin is not working as expected. A live example can be seen at http://corolla.tylercrompton.com/.

Secondly, this is a follow question to Making a slider without recursion in which my script is not a plugin. It did work, though, I am still seeking an answer toward that. Thanks.

jQuery(document).ready(function () {
    'use strict';
    (function ($) {

        var methods = {
            init:   function (options) {

                return this.each(function () {

                    var settings = {
                        'delay':        5000,
                        'direction':    'left',
                        'easing':       'swing',
                        'selector':     '*',
                        'transition':   3000
                    };

                    if (options) {
                        $.extend(settings, options);
                    }

                    $(this).css({
                        'overflow': 'hidden',
                        'position': 'relative'
                    });

                    if ($(this).children(settings.selector).length > 1) {
                        $(this).cycle('slide', settings);
                    }

                });
            },

            slide:  function (options) {
                return this.each(function () {

                    var settings = {
                        'delay':        5000,
                        'direction':    'left',
                        'easing':       'swing',
                        'selector':     '*',
                        'transition':   3000
                    }, animation, property, value;

                    if (options) {
                        $.extend(settings, options);
                    }

                    switch (settings.direction) {
                    case 'left':
                        animation = {left: '-=' + $(this).width()};
                        property = 'left';
                        value = $(this).width();
                        break;
                    case 'right':
                        animation = {left: '+=' + $(this).width()};
                        property = 'right';
                        value = 0;
                        break;
                    case 'up':
                        animation = {top: '-=' + $(this).height()};
                        property = 'top';
                        value = $(this).height();
                        break;
                    case 'down':
                        animation = {top: '+=' + $(this).height()};
                        property = 'top';
                        value = 0;
                        break;
                    default:
                        jQuery.error('Direction ' + settings.direction + ' is not valid for jQuery.fn.cycle');
                        break;
                    }

                    $(this).children(settings.selector + ':first-child').each(function () {
                        $(this).delay(settings.delay);
                        $(this).animate(
                            animation,
                            settings.transition,
                            settings.easing,
                            function () {
                                $(this).css(property, value);
                            }
                        );
                    });

                    $(this).append($(this).children(settings.selector + ':first-child').detach());
                    $(this).children(settings.selector + ':first-child').each(function () {
                        $(this).delay(settings.delay);
                        $(this).animate(
                            animation,
                            settings.transition,
                            settings.easing,
                            function () {
                                $(this).parent().cycle('slide', settings);
                            }
                        );
                    });
                });
            }
        };

        jQuery.fn.cycle = function (method, options) {
            if (methods[method]) {
                return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
            } else if (typeof method === 'object' || !method) {
                return methods.init.apply(this, arguments);
            } else {
                $.error('Method ' + method + ' does not exist on jQuery.fn.cycle');
            }
        };
    }(jQuery));

    jQuery('.slider').cycle();

});

Answer 1

It was actually a CSS error rather than a JavaScript/JQuery error. I was never setting the positions to absolute. I updated my JavaScript in the question that I linked to reflect the most up to date version for those that are interested.