jQuery Image Rotator for SharePoint

Here is a 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: https://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 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 - Information Technology Expert with Two-decades of hands-on experience, specializing in SharePoint, PowerShell, Microsoft 365, and related products. He has held various positions including SharePoint Architect, Administrator, Developer and consultant, has helped many organizations to implement and optimize SharePoint solutions. Known for his deep technical expertise, He's passionate about sharing the knowledge and insights to help others, through the real-world articles!

One thought on “jQuery Image Rotator for SharePoint

  • 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

Your email address will not be published. Required fields are marked *