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:
Rotating banner in SharePoint 2007:
My other jQuery Banner rotating implementations:
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?