jQuery plugin that makes a slider out of an <ul> list

This is one of my very first jQuery plugins. In short: it makes a slider out of an ` list filled with

• items containing s. Just follow this JSFiddle link to see it in action.

I therefore wanted to know if there were any flaws in my code. I would like it be reviewed by anyone who would be willing to let me know of any major problem in it.

So here's the HTML:

And the jQuery plugin code:

``
;(function($) {

$.fn.extend({
sdSlider: function(options) {
if (options && typeof(options) == 'object') {
options = $.extend({}, $.sdSlider.defaults, options);
}

// be sure the plugin is attached to only one DOMElement
if($(this).length == 1) {
new $.sdSlider(this, options);
} else if($(this).length > 1) {
console.error($.messages.severalElements);
} else if($(this).length == 0) {
console.error($.messages.zeroElement);
}

return this;
}
});

// error messages to be displayed in the console
$.messages = {
imgAndLiMismatch: '[jQuery.sdSlider] Error: the number of list items and the number of mismatch.',
severalElements: '[jQuery.sdSlider] Error: several DOM element have been detected. Are you sure you\'re using the right selector?',
noImgFound: '[jQuery.sdSlider] Error: no tag was found within the .',
zeroElement: '[jQuery.sdSlider] Error: couldn\'t find the slider. It seems you have targetted no element.'
};

$.sdSlider = function(el, option) {
$(window).on('load', function() {

var options = option || $.sdSlider.defaults
, $li = $(el).find('> li')
, $img = $li.find('> img')
, imgSrcs = []
, imgHeights = []
, imgWidths = []
, $wrapper
, i
, index;

if(!$img.length) {

One thing that jumps out to me is locking your plugin to one element:

$.fn.extend({
    sdSlider: function(options) {
        if (options && typeof(options) == 'object') {
            options = $.extend({}, $.sdSlider.defaults, options);
        }

        // be sure the plugin is attached to only one DOMElement
        if($(this).length == 1) {
            new $.sdSlider(this, options);
        } else if($(this).length > 1) {
            console.error($.messages.severalElements);
        } else if($(this).length == 0) {
            console.error($.messages.zeroElement);
        }

        return this;
    }
});

Most anything jQuery will happily accept multiple items so I propose the following change:

$.fn.extend({
    sdSlider: function(options) {
        if (options && typeof(options) == 'object') {
            options = $.extend({}, $.sdSlider.defaults, options);
        }

        if($(this).length == 0) {
            console.error($.messages.zeroElement);
        }

        return this.each(function(index, el){
            new $.sdSlider(el, options);
        });
    }
});

along with replacing:

$wrapper = $('').attr('id', 'sdSlider-wrapper').css({...})

with:

$wrapper = $('').addClass('sdSlider-wrapper').css({...})

As well as updating any relevant css.

jsFiddle

StackExchange Code Review Q#98759, answer score: 5