<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script type="text/javascript" src="http://code.jquery.com/jquery-1.3.2.min.js"></script> <div id="slideshow"> <img src="http://www.wallpaperstop.com/wallpapers/nature-wallpapers/autumn-wallpapers/autumn-scene-wallpaper-1600x1200-1206035.jpg" width="1366px" height="662px" /> <img src="http://www.moomoo.co.il/uploads/bg/14062256030.png" width="1366px" height="662px" /> <img src="https://i.imgur.com/TFJgF.jpg" width="1366px" height="662px" /> </div>

(function($) { "use strict"; var ver = 'Lite-1.6'; $.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 ($.browser.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 ($.browser.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); $(function() { // run the code in the markup! $(document).ready(function() { $('#slideshow').cycle({ fx: 'fade', speed: 2500 }); }); });