Главная » DARYA DLE » Скрипты » Простой слайдер
500 0  

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

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

Блоков со слайдами ("стиль - 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>

Оставить свой комментарий:

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2021