User:Ericwong99/sandbox

The following code is refer from Chinese website, I not better in js code sry. No pic limit how many pic you want put also can.

Used in template function






Wikia.css code
.slideshow{ position: relative; display: none; overflow: hidden; }

.slideshow .slideshowControls{ position: absolute; left: 0px; right: 0px; bottom: 0px; height: 10%; background: rgba(0,0,0,.7); opacity: 0; text-align: center; transition: opacity .5s; -moz-transition: opacity .5s; -webkit-transition: opacity .5s; } .slideshow:hover .slideshowControls{opacity: 1;} .slideshow:hover .slideshowControls > span{ display: inline-block; border-radius: 10px; margin: 5px; width: 15px; height: 15px; background: rgba(255,255,255,.3); cursor: pointer; } .slideshow:hover .slideshowControls > span.active{background: white;}

Common.js code
function slideshow{ $('.slideshow > *').slice(1).hide; $('.slideshow').data('slideshowIndex',0).each(function{       var $this = $(this), c = $(' ');        $(this).children.each(function{c.append($(' ').on('click',function{ if($this.queue.length) return true; s($this,$(this).index); }));});       c.addClass('slideshowControls').appendTo(this).children.eq(0).addClass('active');    }).show;

var s = function(el,j){ clearTimeout(el.data('tv')); var i = el.data('slideshowIndex') if(j===undefined) j = (i+1) % (el.children.length-1); el.queue(function(n){$(this).children.eq(i).fadeOut(1000,n);}) .queue(function(n){$(this).children.eq(j).fadeIn(1000,n);}); el.find('.slideshowControls span').removeClass('active').eq(j).addClass('active'); el.data({tv:setTimeout(function{s(el);},5000), slideshowIndex:j}); };   $('.slideshow').on('mouseenter',function{        clearTimeout($(this).data('tv'));    }).on('mouseleave',function{        var $this = $(this);        clearTimeout($this.data('tv'));        $this.data('tv',setTimeout(function{s($this);},3000));            }).trigger('mouseleave'); }