Создание простого слайдера

Иногда сделать слайдер проще самому, чем искать где то готовый. В этом нет ничего сложного и сегодня вы сами в этом убедитесь.

Задача:

Сделать простой слайдер с изображениями, который может отображать в одном слайде несколько изображений.

Решение:

Для начала пишем html код:

<div id="wrapper">
	<div class="main">
		<div class="sk-header-slide">
			<img src="img/p1.jpg" />
		</div>
		<div class="sk-header-slide">
			<img src="img/p2.jpg" />
		</div>
		<div class="sk-header-slide">
			<img src="img/p3.jpg" />
		</div>
		<div class="sk-header-slide">
			<img src="img/p4.jpg" />
		</div>
		<div class="sk-header-slide">
			<img src="img/p5.jpg" />
		</div>
		<div class="sk-header-slide">
			<img src="img/p6.jpg" />
		</div>
		<div class="sk-header-slide">
			<img src="img/p7.jpg" />
		</div>
		<div class="sk-header-slide">
			<img src="img/p8.jpg" />
		</div>
		<div class="sk-header-slide">
			<img src="img/p9.jpg" />
		</div>
		<div class="z1"></div>
		<div class="z2"></div>
	</div>
</div>

После чего пропишем стили для нашего слайдера:

<style>
	.sk-header-slide{
		-webkit-transition: 0.7s;
		-moz-transition:0.7s;
		-o-transition: 0.7s;
		transition: 0.7s;
		width: 239px;
		display: block;
		float: left;
		margin-left: 0;
	}
	.main{
		display:block;
		width:740px;
	}
	#wrapper{
		overflow:hidden;
		height: 473px;
	}
	.z1 {
		display: block;
		margin-right: 170px;
		margin-top: 175px;
		padding: 10px 15px;
		right: 0;
		position: absolute;
		z-index: 111;
		font-size: 25px;
		font-weight: bold;
		border-radius: 100%;
		background: #bba8d5;
		text-align: center;
		color: #fff;
		cursor: pointer;
		-webkit-transition: 0.5s;
		-moz-transition:0.5s;
		-o-transition: 0.5s;
		transition: 0.5s;
	}
	.z2 {
		display: block;
		margin-left: 20px;
		margin-top: 175px;
		padding: 10px 15px;
		position: absolute;
		z-index: 111;
		font-size: 25px;
		font-weight: bold;
		border-radius: 100%;
		background: #bba8d5;
		text-align: center;
		color: #fff;
		cursor: pointer;
		-webkit-transition: 0.5s;
		-moz-transition:0.5s;
		-o-transition: 0.5s;
		transition: 0.5s;
	}
	</style>

Скрипт слайдера:

<script>
$(document).ready(function(){
	var zz;
	var d = 0;
	var koichest = 1; // количество элементов в одном слайде
	var koichest2 = koichest; // количество элементов в одном слайде
	var wmain = 740; // ширина main
	var wslide = 239; //ширина элемента
	var wwrapper = wslide*koichest;
	$("#wrapper").css("width", wwrapper+"px");
	var elem = $('.sk-header-slide').length;
	var numb = elem;
	elem = elem/koichest;
	var welem = wmain*elem;
	elem = Math.round(elem);
	welem = $(".main").css("width", welem+"px");
	
	$(".z1").click(function () {
		if(koichest!=numb){
			koichest = koichest+1;
			if(!zz){
				zz=0;
			}
			zz = zz-wslide;
			$(".sk-header-slide:eq("+d+")").css("marginLeft", "-"+wslide+"px");
			for(var i = 0; i > zz; i=i+zz){
				d++;
			}
		}
	});

	$(".z2").click(function () {
		if(koichest!=koichest2){
			koichest = koichest-1;
			if(zz!=0){
				for (var i = 0; i > zz; i=i+zz) {
					d = d-1;
				}
				zz = zz+wslide;
				$(".sk-header-slide:eq("+d+")").css("marginLeft", "0px");
			}
		}
	});

});
</script>

Разберем подробнее этот скрипт.

В строчке "var koichest = 1;" указывается колличество картинок или каких других элементов в одном слайде.

В строчке "var wmain = 740;" указывается ширина блока div с классом main.

В строчке "var wslide = 239;" указывается ширина одного элемента, в нашем случае это блок div с классом sk-header-slide.