jQuery Image Rotator for SharePoint

Here is the quick and simple way to implement a rotating image slider for SharePoint using jQuery.All you have to do is: upload slider images to any SharePoint library and change the image paths in the Slider section of the below code and place it in the 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="https://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;
    }

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:

jquery rotating banner sharepoint

Rotating banner in SharePoint 2007:

jquery rotator sharepoint

My other jQuery Banner rotating implementations:

Salaudeen Rajack

Salaudeen Rajack is a SharePoint Architect with Two decades of SharePoint Experience. He loves sharing his knowledge and experiences with the SharePoint community, through his real-world articles!

One thought on “jQuery Image Rotator for SharePoint

  • December 30, 2016 at 3:25 PM

    Thanks for the code. I have managed to implement this on my SP site, but the slider doesn’t work. its just showing me the first image out of the all listed images. Can you help?

    Reply

Leave a Reply