Простой слайдер

Простой слайдед с проверкой на конец слайдов и их очередность, нету ограничений на количество слайдов.

Блоков со слайдами ("стиль - slide") может быть много.

html + css:

		<div class="prslid">
			<div class="slide-button slide-prev"><i></i></div>
				<div class="slide-content">
					<div class="-slide slide-active"><img src="images/foto-vann.jpg" alt=""/></div>
					<div class="-slide">2</div>
					<div class="-slide">3</div>
				</div>
			<div class="slide-button slide-next"><i></i></div>
		</div>

<style>
.prslid {display:block;position:relative; width:90%;margin:20px 5% 20px 5%;padding:0 45px 0 45px;}
.prslid .slide-button, .prslid .slide-content {display: block; width: 100%; min-height: 500px;}
.prslid .slide-button:hover {background-color: rgba(255,255,255,.15);}
.prslid .slide-button {width:29px;position:absolute;top:0;cursor:pointer;}
.prslid .slide-prev {left:0;}
.prslid .slide-next {right:0;}
.prslid .slide-prev i, .prslid .slide-next i {display: block;width: 29px; height: 54px;background: url('../images/sprit.png'); position:absolute; top:200px;z-index:22;}
.prslid .slide-prev i {background-position: -1314px -568px;}
.prslid .slide-next i {background-position: -1314px -642px;}
.prslid .slide-content {position: relative; overflow: hidden;}
.prslid .-slide {display: none; width: 100%; height: 100%; background: #fff;}
.prslid .-slide.slide-active {display: block;}
</style>

Код скрипта:

<script>
// Скрипт слайдера
$('.slide-button').on('click',function(){
    var buttonPrev = $(this).hasClass('slide-prev'), buttonNext = $(this).hasClass('slide-next');
    var slideBlock = $('.-slide'), slideActive = $('.-slide.slide-active');
    var slideLen = slideBlock.length, slideActiveIndex = slideActive.index();

    slideBlock.removeClass('slide-active');

    if(buttonPrev) {
        var slidePrev = (slideActiveIndex-1);
        slideBlock.eq(slidePrev).addClass('slide-active');
        console.info('slide: '+slidePrev+'/'+slideLen);
    }
    if(buttonNext) {
        var slideNext = (slideActiveIndex+1);
        if(slideNext==slideLen) var slideNext = 0;
        slideBlock.eq(slideNext).addClass('slide-active');
        console.info('slide: '+slideNext+'/'+slideLen);
    }
});
</script>

Скрипт з автопрокруткою:

<script>
    function changeSlide() {
        var slideBlock = $('.-slide'), slideActive = $('.-slide.slide-active');
        var slideLen = slideBlock.length, slideActiveIndex = slideActive.index();

        slideBlock.removeClass('slide-active');
        var slideNext = (slideActiveIndex + 1);
        if (slideNext == slideLen) slideNext = 0;
        slideBlock.eq(slideNext).addClass('slide-active');
        console.info('slide: ' + slideNext + '/' + slideLen);
    }

    $('.slide-button').on('click', function () {
        var buttonPrev = $(this).hasClass('slide-prev'), buttonNext = $(this).hasClass('slide-next');

        if (buttonPrev) {
            var slideActiveIndex = $('.-slide.slide-active').index();
            var slidePrev = (slideActiveIndex - 1);
            if (slidePrev < 0) slidePrev = $('.-slide').length - 1;
            $('.-slide').eq(slidePrev).addClass('slide-active');
            console.info('slide: ' + slidePrev + '/' + $('.-slide').length);
        }
        if (buttonNext) {
            changeSlide();
        }
    });

    // Додати автопрокрутку кожні 3 секунди
    setInterval(changeSlide, 3000);
</script>