jQuery Image Rotator for SharePoint

Here is the quick and simple way to implement rotating image slider for SharePoint using jQuery.All you have do is: upload slider images to any SharePoint library and change the image paths in Slider section of the below code and place it in content editor web part or Script editor in SharePoint 2013:

jQuery Rotating Banner code:

<div class="im-brand-central-slider">
    <ul class="slider">
        <li><img src="/sites/teams/brandcentral/images1/Home_Rotator/Growth.jpg" /></li>
        <li><img src="/sites/teams/brandcentral/images1/Home_Rotator/ImproveTechOutcomes.jpg" /></li>
        <li><img src="/sites/teams/brandcentral/images1/Home_Rotator/NewEyes.jpg" /></li>
        <li><img src="/sites/teams/brandcentral/images1/Home_Rotator/NextGeneration.jpg" /></li>
<li><img src="/sites/teams/brandcentral/images1/Home_Rotator/PeopleAreKey.jpg"  /></li>
<li><img src="/sites/teams/brandcentral/images1/Home_Rotator/Realize.jpg" /></li>
    </ul>
    <div class="slider-nav">
        <a href="javascript:void(0)" class="slider-prev">Prev</a>
        <a href="javascript:void(0)" class="slider-next">Next</a>
    </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
    (function ($) {
        "use strict";
        var ver = 'Lite-1.7';
        var msie = /MSIE/.test(navigator.userAgent);
        $.fn.cycle = function (options) {
            return this.each(function () {
                options = options || {};

                if (this.cycleTimeout)
                    clearTimeout(this.cycleTimeout);

                this.cycleTimeout = 0;
                this.cyclePause = 0;

                var $cont = $(this);
                var $slides = options.slideExpr ? $(options.slideExpr, this) : $cont.children();
                var els = $slides.get();
                if (els.length < 2) {
                    if (window.console)
                        console.log('terminating; too few slides: ' + els.length);
                    return; // don't bother
                }

                // support metadata plugin (v1.0 and v2.0)
                var opts = $.extend({}, $.fn.cycle.defaults, options || {}, $.metadata ? $cont.metadata() : $.meta ? $cont.data() : {});
                var meta = $.isFunction($cont.data) ? $cont.data(opts.metaAttr) : null;
                if (meta)
                    opts = $.extend(opts, meta);

                opts.before = opts.before ? [opts.before] : [];
                opts.after = opts.after ? [opts.after] : [];
                opts.after.unshift(function () { opts.busy = 0; });

                // allow shorthand overrides of width, height and timeout
                var cls = this.className;
                opts.width = parseInt((cls.match(/w:(\d+)/) || [])[1], 10) || opts.width;
                opts.height = parseInt((cls.match(/h:(\d+)/) || [])[1], 10) || opts.height;
                opts.timeout = parseInt((cls.match(/t:(\d+)/) || [])[1], 10) || opts.timeout;

                if ($cont.css('position') == 'static')
                    $cont.css('position', 'relative');
                if (opts.width)
                    $cont.width(opts.width);
                if (opts.height && opts.height != 'auto')
                    $cont.height(opts.height);

                var first = 0;
                $slides.css({ position: 'absolute', top: 0 }).each(function (i) {
                    $(this).css('z-index', els.length - i);
                });

                $(els[first]).css('opacity', 1).show(); // opacity bit needed to handle reinit case
                if (msie)
                    els[first].style.removeAttribute('filter');

                if (opts.fit && opts.width)
                    $slides.width(opts.width);
                if (opts.fit && opts.height && opts.height != 'auto')
                    $slides.height(opts.height);
                if (opts.pause)
                    $cont.hover(function () { this.cyclePause = 1; }, function () { this.cyclePause = 0; });

                var txFn = $.fn.cycle.transitions[opts.fx];
                if (txFn)
                    txFn($cont, $slides, opts);

                $slides.each(function () {
                    var $el = $(this);
                    this.cycleH = (opts.fit && opts.height) ? opts.height : $el.height();
                    this.cycleW = (opts.fit && opts.width) ? opts.width : $el.width();
                });

                if (opts.cssFirst)
                    $($slides[first]).css(opts.cssFirst);

                if (opts.timeout) {
                    // ensure that timeout and speed settings are sane
                    if (opts.speed.constructor == String)
                        opts.speed = { slow: 600, fast: 200 }[opts.speed] || 400;
                    if (!opts.sync)
                        opts.speed = opts.speed / 2;
                    while ((opts.timeout - opts.speed) < 250)
                        opts.timeout += opts.speed;
                }
                opts.speedIn = opts.speed;
                opts.speedOut = opts.speed;

                opts.slideCount = els.length;
                opts.currSlide = first;
                opts.nextSlide = 1;

                // fire artificial events
                var e0 = $slides[first];
                if (opts.before.length)
                    opts.before[0].apply(e0, [e0, e0, opts, true]);
                if (opts.after.length > 1)
                    opts.after[1].apply(e0, [e0, e0, opts, true]);

                if (opts.click && !opts.next)
                    opts.next = opts.click;
                if (opts.next)
                    $(opts.next).unbind('click.cycle').bind('click.cycle', function () { return advance(els, opts, opts.rev ? -1 : 1); });
                if (opts.prev)
                    $(opts.prev).unbind('click.cycle').bind('click.cycle', function () { return advance(els, opts, opts.rev ? 1 : -1); });

                if (opts.timeout)
                    this.cycleTimeout = setTimeout(function () {
                        go(els, opts, 0, !opts.rev);
                    }, opts.timeout + (opts.delay || 0));
            });
        };

        function go(els, opts, manual, fwd) {
            if (opts.busy)
                return;
            var p = els[0].parentNode, curr = els[opts.currSlide], next = els[opts.nextSlide];
            if (p.cycleTimeout === 0 && !manual)
                return;

            if (manual || !p.cyclePause) {
                if (opts.before.length)
                    $.each(opts.before, function (i, o) { o.apply(next, [curr, next, opts, fwd]); });
                var after = function () {
                    if (msie)
                        this.style.removeAttribute('filter');
                    $.each(opts.after, function (i, o) { o.apply(next, [curr, next, opts, fwd]); });
                    queueNext(opts);
                };

                if (opts.nextSlide != opts.currSlide) {
                    opts.busy = 1;
                    $.fn.cycle.custom(curr, next, opts, after);
                }
                var roll = (opts.nextSlide + 1) == els.length;
                opts.nextSlide = roll ? 0 : opts.nextSlide + 1;
                opts.currSlide = roll ? els.length - 1 : opts.nextSlide - 1;
            } else {
                queueNext(opts);
            }

            function queueNext(opts) {
                if (opts.timeout)
                    p.cycleTimeout = setTimeout(function () { go(els, opts, 0, !opts.rev); }, opts.timeout);
            }
        }

        // advance slide forward or back
        function advance(els, opts, val) {
            var p = els[0].parentNode, timeout = p.cycleTimeout;
            if (timeout) {
                clearTimeout(timeout);
                p.cycleTimeout = 0;
            }
            opts.nextSlide = opts.currSlide + val;
            if (opts.nextSlide < 0) {
                opts.nextSlide = els.length - 1;
            }
            else if (opts.nextSlide >= els.length) {
                opts.nextSlide = 0;
            }
            go(els, opts, 1, val >= 0);
            return false;
        }

        $.fn.cycle.custom = function (curr, next, opts, cb) {
            var $l = $(curr), $n = $(next);
            $n.css(opts.cssBefore);
            var fn = function () { $n.animate(opts.animIn, opts.speedIn, opts.easeIn, cb); };
            $l.animate(opts.animOut, opts.speedOut, opts.easeOut, function () {
                $l.css(opts.cssAfter);
                if (!opts.sync)
                    fn();
            });
            if (opts.sync)
                fn();
        };

        $.fn.cycle.transitions = {
            fade: function ($cont, $slides, opts) {
                $slides.not(':eq(0)').hide();
                opts.cssBefore = { opacity: 0, display: 'block' };
                opts.cssAfter = { display: 'none' };
                opts.animOut = { opacity: 0 };
                opts.animIn = { opacity: 1 };
            },
            fadeout: function ($cont, $slides, opts) {
                opts.before.push(function (curr, next, opts, fwd) {
                    $(curr).css('zIndex', opts.slideCount + (fwd === true ? 1 : 0));
                    $(next).css('zIndex', opts.slideCount + (fwd === true ? 0 : 1));
                });
                $slides.not(':eq(0)').hide();
                opts.cssBefore = { opacity: 1, display: 'block', zIndex: 1 };
                opts.cssAfter = { display: 'none', zIndex: 0 };
                opts.animOut = { opacity: 0 };
                opts.animIn = { opacity: 1 };
            }
        };

        $.fn.cycle.ver = function () { return ver; };

        // @see: http://malsup.com/jquery/cycle/lite/
        $.fn.cycle.defaults = {
            animIn: {},
            animOut: {},
            fx: 'fade',
            after: null,
            before: null,
            cssBefore: {},
            cssAfter: {},
            delay: 0,
            fit: 0,
            height: 'auto',
            metaAttr: 'cycle',
            next: null,
            pause: false,
            prev: null,
            speed: 1000,
            slideExpr: null,
            sync: true,
            timeout: 4000
        };

    })(jQuery);
    jQuery(document).ready(function ($) {
        $('ul.slider').cycle({
            prev: $('.slider-prev'),
            next: $('.slider-next')
        });
    });
</script>
<style>
    .im-brand-central-slider .slider-nav {
        width: 685px;
        background: #000;
        color: #fff;
        font-size: 11px;
        padding: 3px 0px;
        text-transform: uppercase;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        text-align: right;
    }
    .im-brand-central-slider .slider-nav a {
        cursor: pointer;
  color: #f0f0f0 !important;
    }
 .im-brand-central-slider .slider-nav a:hover{
  color: #ffffff !important;
    }
    .im-brand-central-slider .slider-nav a.slider-prev {
        border-right: 1px solid #888;
        padding-right: 10px;
        margin-right: 5px;
    }
    .im-brand-central-slider .slider-nav a.slider-next {
     margin-right: 10px;
    }
    .im-brand-central-slider,
    .im-brand-central-slider ul.slider {
        position: relative;
    }
    .im-brand-central-slider,
    .im-brand-central-slider ul.slider,
    .im-brand-central-slider ul.slider li {
        width: 685px;
        height: 200px;
        padding: 0;
        margin: 0;
    }
    .im-brand-central-slider {
     height: 219px;
     margin-bottom: 20px;
    }
    .im-brand-central-slider ul.slider,
    .im-brand-central-slider ul.slider li{
        list-style-type: none;
    }
    .im-brand-central-slider ul.slider li{
        display: block;
        position: absolute;
        top: 0;
        left: 0;
    }
    .im-brand-central-slider ul.slider li img{
        width: 100%;
        height: auto;
    }
</style>

Verified this rotating banner code works in all of the versions of SharePoint, including SharePoint 2007, SharePoint 2010 and in SharePoint 2013.

Rotating banner in SharePoint 2013:

Rotating banner in SharePoint 2007:

My other jQuery Banner rotating implementations:

• Rotating Banner for SharePoint using jQuery 
• jQuery Rotating Banner (Carousel/Image Slider) for SharePoint