slideshow #js #css #html

index.html

<div class="slideshow" data-speed="1000" data-speed-manual="100" data-delay="10000" data-delay-init="1500" animation="fade" easing="easeInSine">
  <ul>
  	<li style="display:block;background-image:url('http://lorempixel.com/g/640/480/cats/');"></li>
  	<li style="display:none;background-image:url('http://lorempixel.com/g/640/480/people/');"></li>
  	<li style="display:none;background-image:url('http://lorempixel.com/g/640/480/nature/');"></li>
  </ul>
</div>

<!-- enable this to turbo up sizing (no clipping on page load -->
<script type="text/javascript">
jQuery('.slideshow').height( jQuery(window).height()/2 );
</script>

script.js

// build up config for each slider
var slideshow_config = {};
$(document).ready(function() {
	if( $('.slideshow').length > 0 ) {
		$('.slideshow').each(function(i) {
			var id = i+1;
			$(this).attr('data-id',id);
	    		slideshow_config[id] = {
				    timeout: null,
				    speed: parseInt($(this).attr('data-speed')),
				    speed_manual: parseInt($(this).attr('data-speed-manual')),
				    delay: parseInt($(this).attr('data-delay')),
				    delay_init: parseInt($(this).attr('data-delay-init')),
				    animation: $(this).attr('data-animation'),
				    easing: $(this).attr('data-easing')
	    		}
    		});
	}
});

// set size
var windowWidth = $(window).width(); $(window).resize(function(){ if ($(window).width() != windowWidth) { windowWidth = $(window).width(); sliderSize(); } });
$(document).ready(function() { sliderSize(); });
function sliderSize() {
	if( $('.slideshow').length > 0 ) {
		$('.slideshow').each(function() {
			$(this).width( $(window).width()/2 );
			$(this).height( $(window).height()/2 );
		});
	}
}

// init slider
$(document).ready(function() {
if( $('.slideshow').length > 0 ) {
	$('.slideshow').each(function() {
		initSlideshow(this);
	}); 
}
});

function initSlideshow(self) {

    // cancel if only 1 image is there
    if($(self).find('ul li').length <= 1 ) { return false; }

	// nav
	$(self).append('<div class="nav"></div>');
	$(self).find('ul li').each(function(i) {
	    $(self).find('.nav').append('<a href="#">'+(i+1)+'</a>');
	});
	$(self).find('.nav').addClass('count_'+$(self).find('.nav a').length); // for css positioning
	$(self).find('.nav a:first-child').addClass('active');
	// next/prev
	$(self).prepend('<div class="arrow"><a class="left" href="#">links</a><a class="right" href="#">rechts</a></div>');
	$(self).find('.arrow .left').addClass('disabled');
	// revert items
	$(self).find('ul').append($(self).find('ul li').get().reverse());
	// enumerate
	var num = $(self).find('ul li').length;
	$(self).find('ul li').each(function() {
	    $(this).addClass('num_'+num);
	    if(num == 1) { $(this).addClass('active'); }
	    num--;
	});
	// start
	window.setTimeout(function(){
	    startSlideshow(self,2,false);
	},slideshow_config[$(self).attr('data-id')].delay_init);
	// bubble nav
	$(self).find('.nav a').click(function() {           
	    if($(this).hasClass('disabled')) { return false; }
	    $(self).addClass('manual');
	    startSlideshow( self, $(this).prevAll('a').length+1, 'bubble' );
	    return false;
	});
	// arrow nav
	$(self).find('.arrow a').click(function() {           
	    if($(this).hasClass('disabled')) { return false; }
	    $(self).addClass('manual');
	    var i = $(self).find('.nav a.active').prevAll('a').length+1;
	    if( $(this).hasClass('right') ) { i++; }
	    if( $(this).hasClass('left') ) { i--; }
	    startSlideshow(self, i, ($(this).hasClass('right')?('right'):('left')) );
	    return false;
	});
}

function startSlideshow(s,n,m) {  

    var self = s;
    if(typeof slideshow_config[$(self).attr('data-id')].timeout !== "undefined"){ clearTimeout(slideshow_config[$(self).attr('data-id')].timeout); }

	var cur = $(self).find('.nav a.active').prevAll('a').length+1;  
	if( cur == n ) { return false; }
	
	$(self).find('.nav a').addClass('disabled');
	$(self).find('.nav a.active').removeClass('active');
	$(self).find('.nav a:nth-child('+n+')').addClass('active');
	
	if( $(self).find('.nav a:last-child').hasClass('active') ) { $(self).find('.arrow .right').addClass('disabled'); }
	else { $(self).find('.arrow .right').removeClass('disabled'); }
	if( $(self).find('.nav a:first-child').hasClass('active') ) { $(self).find('.arrow .left').addClass('disabled'); }
	else { $(self).find('.arrow .left').removeClass('disabled'); }
	
	$(self).find('ul li.num_'+n).insertBefore( $(self).find('ul li.num_'+cur) );
	$(self).find('ul li.num_'+n).show();

	// after a manual call, stop automatic call (for 1x)
	if( $(self).hasClass('manual') && m === false ) { $(self).removeClass('manual'); return false; }

	$(self).find('ul li.num_'+cur).fadeOut(((m===false)?(slideshow_config[$(self).attr('data-id')].speed):(slideshow_config[$(self).attr('data-id')].speed_manual)), function() {
	    $(self).find('ul li.num_'+cur).prependTo($(self).find('ul')).hide();
	    $(self).find('.nav a').removeClass('disabled');
	    slideshow_config[$(self).attr('data-id')].timeout = window.setTimeout(function(){
				if( $(self).hasClass('manual') && m === false ) { $(self).removeClass('manual'); return false; }
				else { $(self).removeClass('manual'); }
	        n = $(self).find('.nav a.active').prevAll('a').length+2;
	        n = ((n-1) % $(self).find('ul li').length)+1;
	        startSlideshow(s,n,false);
	    },slideshow_config[$(self).attr('data-id')].delay);
	});         
}

style.css

.slideshow {
    position:relative;
    width:100%;
    height:100%;
}
.slideshow ul {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
}
.slideshow ul li {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
}
.slideshow .nav {
    position:absolute;
    top:0;
    left:50%;
    z-index:400;
}
.slideshow .nav.count_1 { margin-left:-10px; }
.slideshow .nav.count_2 { margin-left:-20px; }
.slideshow .nav.count_3 { margin-left:-30px; }
.slideshow .nav.count_4 { margin-left:-40px; }
.slideshow .nav.count_5 { margin-left:-50px; }
.slideshow .nav.count_6 { margin-left:-60px; }
.slideshow .nav.count_7 { margin-left:-70px; }
.slideshow .nav.count_8 { margin-left:-80px; }
.slideshow .nav.count_9 { margin-left:-90px; }
.slideshow .nav.count_10 { margin-left:-100px; }
.slideshow .nav a {
    display:block;
    float:left;
    background-color:#fff;
    width:20px;
    height:20px;
    line-height:20px;
    text-align:center;
}
.slideshow .nav a.active {
    color:red;
}
.slideshow .nav a.disabled {
    color:yellow;
}
.slideshow .arrow {

}
.slideshow .arrow .left,
.slideshow .arrow .right {
    position: absolute;
    top: 50%;
    width: 5%;
    height: 0;
    padding-bottom: 5%;
    background-color: #F00;
    z-index: 400;
    display: block;
    text-indent: -9999px;
}
.slideshow .arrow .left {
    left:2%;
}
.slideshow .arrow .right {
    right:2%;
}
.slideshow .arrow .disabled {
    opacity:0.25;
    cursor:default;
}
.slideshow .arrow .left:after,
.slideshow .arrow .right:after {
    content: "";
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    margin-top: -1px;
    margin-left: -1px;
    border-bottom: 2px solid #FF0;
    border-right: 2px solid #FF0;
}
.slideshow .arrow .left:after {
    -moz-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
}
.slideshow .arrow .right:after {
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}