JQuery easySlider 在 Chrome/Safari 中不工作

Question

Any feedback on this would be great. I have installed the latest version of easySlider along with the latest version of JQuery but I am unable to get the images to slide in Chrome or Safari.

The initial image loads but no automatic sliding and the buttons don't work on click. I have included the code for the page and the easySlider js code.

Thanks in advance,

view page here ...

CODE FOR PAGE:

<?php
  require_once("inc_header.php");
?>

<script type="text/javascript" src="/_js/easySlider1.7.js"></script>
<script type="text/javascript">

  $(document).ready(function () {
      $("#slider").easySlider({
          auto: true,
          continuous: true
      });
  });

</script>

CODE FOR easySlider:

(function ($) {

    $.fn.easySlider = function (options) {

        // default configuration properties
        var defaults = {
            prevId: 'prevBtn',
            prevText: '',
            nextId: 'nextBtn',
            nextText: '',
            controlsShow: true,
            controlsBefore: '',
            controlsAfter: '',
            controlsFade: true,
            firstId: 'firstBtn',
            firstText: 'First',
            firstShow: false,
            lastId: 'lastBtn',
            lastText: 'Last',
            lastShow: false,
            vertical: false,
            speed: 1000,
            auto: true,
            pause: 2000,
            continuous: false,
            numeric: false,
            numericId: 'controls'
        };

        var options = $.extend(defaults, options);

        this.each(function () {
            var obj = $(this);
            var s = $("li", obj).length;
            var w = $("li", obj).width();
            var h = $("li", obj).height();
            var clickable = true;
            obj.width(w);
            obj.height(h);
            obj.css("overflow", "hidden");
            var ts = s - 1;
            var t = 0;
            $("ul", obj).css('width', s * w);

            if (options.continuous) {
                $("ul", obj).prepend($("ul li:last- child", obj).clone().css("margin-left", "-" + w + "px"));
                $("ul", obj).append($("ul li:nth-child(2)", obj).clone());
                $("ul", obj).css('width' (s + 1) * w);
            };

            if (!options.vertical) $("li", obj).css('float', 'left');


            if (options.controlsShow) {
                var html = options.controlsBefore;
                if (options.numeric) {
                    html += '<ol id="' + options.numericId + '"></ol>';
                } else {
                    if (options.firstShow) html += '<span id="' + options.firstId + '"><a  href=\"javascript:void(0);\">' + options.firstText + '</a></span>';
                    html += ' <span id="' + options.prevId + '"><a href=\"javascript:void(0);\">' + options.prevText + '</a></span>';
                    html += ' <span id="' + options.nextId + '"><a href=\"javascript:void(0);\">' + options.nextText + '</a></span>';
                    if (options.lastShow) html += ' <span id="' + options.lastId + '"><a href=\"javascript:void(0);\">' + options.lastText + '</a></span>';
                };

                html += options.controlsAfter;
                $(obj).after(html);
            };

            if (options.numeric) {
                for (var i = 0; i < s; i++) {
                    $(document.createElement("li")).attr('id', options.numericId + (i + 1)).html('<a rel=' + i + ' href=\"javascript:void(0);\">' + (i + 1) + '</a>').appendTo($("#" + options.numericId)).click(function () {
                        animate($("a", $(this)).attr('rel'), true);
                    });
                };
            } else {
                $("a", "#" + options.nextId).click(function () {
                    animate("next", true);
                });
                $("a", "#" + options.prevId).click(function () {
                    animate("prev", true);
                });
                $("a", "#" + options.firstId).click(function () {
                    animate("first", true);
                });
                $("a", "#" + options.lastId).click(function () {
                    animate("last", true);
                });
            };

            function setCurrent(i) {
                i = parseInt(i) + 1;
                $("li", "#" + options.numericId).removeClass("current");
                $("li#" + options.numericId + i).addClass("current");
            };

            function adjust() {
                if (t > ts) t = 0;
                if (t < 0) t = ts;
                if (!options.vertical) {
                    $("ul", obj).css("margin-left", (t * w * -1));
                } else {
                    $("ul", obj).css("margin-left", (t * h * -1));
                }
                clickable = true;
                if (options.numeric) setCurrent(t);
            };

            function animate(dir, clicked) {
                if (clickable) {
                    clickable = false;
                    var ot = t;
                    switch (dir) {
                    case "next":
                        t = (ot >= ts) ? (options.continuous ? t + 1 : ts) : t + 1;
                        break;
                    case "prev":
                        t = (t <= 0) ? (options.continuous ? t - 1 : 0) : t - 1;
                        break;
                    case "first":
                        t = 0;
                        break;
                    case "last":
                        t = ts;
                        break;
                    default:
                        t = dir;
                        break;
                    };
                    var diff = Math.abs(ot - t);
                    var speed = diff * options.speed;
                    if (!options.vertical) {
                        p = (t * w * -1);
                        $("ul", obj).animate({
                            marginLeft: p
                        }, {
                            queue: false,
                            duration: speed,
                            complete: adjust
                        });
                    } else {
                        p = (t * h * -1);
                        $("ul", obj).animate({
                            marginTop: p
                        }, {
                            queue: false,
                            duration: speed,
                            complete: adjust
                        });
                    };

                    if (!options.continuous && options.controlsFade) {
                        if (t == ts) {
                            $("a", "#" + options.nextId).hide();
                            $("a", "#" + options.lastId).hide();
                        } else {
                            $("a", "#" + options.nextId).show();
                            $("a", "#" + options.lastId).show();
                        };
                        if (t == 0) {
                            $("a", "#" + options.prevId).hide();
                            $("a", "#" + options.firstId).hide();
                        } else {
                            $("a", "#" + options.prevId).show();
                            $("a", "#" + options.firstId).show();
                        };
                    };

                    if (clicked) clearTimeout(timeout);
                    if (options.auto && dir == "next" && !clicked) {;
                        timeout = setTimeout(function () {
                            animate("next", false);
                        }, diff * options.speed + options.pause);
                    };

                };

            };
            // init
            var timeout;
            if (options.auto) {;
                timeout = setTimeout(function () {
                    animate("next", false);
                }, options.pause);
            };

            if (options.numeric) setCurrent(0);

            if (!options.continuous && options.controlsFade) {
                $("a", "#" + options.prevId).hide();
                $("a", "#" + options.firstId).hide();
            };

        });

    };

})(jQuery);

Answer 1

In your html you have some errors (can see these in view source so not a javascript issue)

Change

<div id="slider" align="center" margin-left:10px;>

to

<div id="slider">

The align attribute is what is actually causing the issue. Tested on Chrome (PC) v18

Hope that helps:)