SiteIS

jQuery - безграничные возможности в дизайне Вашего сайта!

- Один из самых популярных на сегодня среди веб разработчиков фреймворк

- Позволяет быстро и легко создать потрясающие веб-приложения

- Удивительно красивые анимационные эффекты

- Улучшение пользовательского интерфейса

Слайдер - карусель

Что умеет этот слайдер:

- автоматическая прокрутка слайдов влево;

- прокрутка слайдов вправо/влево по клику на кнопках навигации;

- остановка автоматической прокрутки при наведении мыши на область слайдера;

- нет ограничений на содержимое и количество слайдов.

С подробным обсуждением кода можно ознасомиться в статьях "Слайдер с прокруткой (карусель)", "Заканчиваем работу над слайдером-каруселью" и "Исправляем баги в слайдере-карусели" .

Посмотреть демо, или скачать готовый код можно по ссылкам ниже:

Скачать готовый код Посмотреть Demo

html разметка для слайдера карусели:

<div class="carousel_wrap">	
	<span class="prev">prev</span>
	<span class="next">next</span>		
	<div class="visual_block">
		<ul>
			<li>
				<img src="/slider_image1.jpg" alt="" />
				<div class="text">Подпись к фото 1</div>
			</li>
			<li>
				<img src="/slider_image2.jpg" alt="" />
				<div class="text">Подпись к фото 2</div>
			</li>
			<li>
				<img src="/slider_image3.jpg" alt="" />
				<div class="text">Подпись к фото 3</div>
			</li>
		</ul>
	</div>		
</div>

Вариант оформления слайдера:

.carousel_wrap  {
margin: 50px auto;
width:700px;
height:400px;
position:relative;
}
.visual_block {
margin: 0 auto;
height:100%;
position: relative;
overflow: hidden;
}
.visual_block ul {
position: relative;
}
.visual_block ul, .visual_block li {
height:100%;
float: left;
position: relative;
}
.visual_block li {
width:640px;
}

.carousel_wrap span.next, .carousel_wrap span.prev {
margin-top:-20px;
width:15px;
height:26px;
display:block;
text-indent:-9999px;
overflow:hidden;
cursor:pointer;
background:url(slider2_arrow.png) no-repeat;
position:absolute;
top:50%;
}
.carousel_wrap span.next {
right:0;
background-position:-15px 0;
}
.carousel_wrap span.next:hover {
background-position:-15px -26px;
}
.carousel_wrap span.prev:hover {
background-position:0 -26px;
}

.text {
padding:20px 10px;
width:97%;
font-size:14px;
color:#ff0000;
position:absolute;
bottom:0;
left:0;
background-color:#ccc;
opacity:0.7;
filter: alpha(opacity=70);
}

js код:

	
$(document).ready(function(){
	var elWrap = $('.carousel_wrap');
	var	visual = $('.visual_block');
	var	carousel = visual.children('ul');
	var	visible = 1;
		itemWidth = carousel.children().outerWidth(),
		itemsTotal = carousel.children().length,
		autoChange = 5000,
		btnNext = $('.next'),
		btnPrev = $('.prev');

	visual.css({'width': visible * itemWidth + 'px'});
	
	carousel.css({'width': itemsTotal * itemWidth,	'left': 0});
	
	function chengeLeft () {
		var item = carousel.children().eq(0);
		btnNext.off('click', chengeLeft);		
		carousel.animate({left: -itemWidth}, 500, function() {
			item.appendTo(carousel);		
			carousel.css({"left": 0 });	
			btnNext.on('click', chengeLeft);
		});
	}	
	
	function chengeRigth () {
		var item = $(carousel).children().eq(-1);
		item.prependTo(carousel);
		carousel.css({"left": -itemWidth});		
		btnPrev.off('click', chengeRigth);		
		carousel.animate({left: 0}, 500, function() {
			btnPrev.on('click', chengeRigth);
		});
	}	
	
	var interval = setInterval(chengeLeft, autoChange);

	btnNext.on('click', chengeLeft);	
	btnPrev.on('click', chengeRigth);	
	
	elWrap.mouseover(function() {
		clearInterval(interval);
	});
	
	elWrap.mouseout(function() {
		interval = setInterval(chengeLeft, autoChange);
	});	
});

Карусель проверена в ИЕ 7-8-9, FireFox, Chrome, Safari.

Автор: Super User

Комментарии  

 
0 # Денис 19.05.2013 17:12
Привет.Я полный нуб :cry:

Кароче прописываю путь к скрипту из папки который. ничо не происходит.Из первого урока выпадает окно типа Жкверу подключен и работает.а когда начинаю подключать что то серьезнее типа слайдера..ничег о не получается и не работает.
Пишу в body то что у тебя в файле..в стиль прописываю..нич о не получается. Что я не так делаю? уже и прописывал все как у тебя в файле..и загружал отдельно твой css и к нему прописывал код в heder.
И еще вопрос..куда вставлять картинки стрелочек? в какую папку.
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Admin 19.05.2013 23:48
Попробуйте скачать пример и посмотреть, работает ли он у вас на странице... от сюда и пляшите.
А вообще, неплохо было бы посмотреть на ваш код, было бы легче найти ошибку.
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Игорь 01.05.2014 19:03
Привет. Беда такая:
Создаю все в точности как в листингах. Получается то же самое, только когда слайд уходит влево, блок слайдера, в котором все отображается, расширяется, а когда анимация кончается - ширина снова становится нормальной. Проверял все листинги, весь код. Все 1 в 1. Скачал готовый код - работает так, как и должен. Проверил заново. Нифига. Код абсолютно одинаковый, а работает по-разному. Пробовал разные версии jQuery - результата тоже не принесло.
Какие есть мнения? :lol: :lol:
Ответить | Ответить с цитатой | Цитировать
 
 
0 # admin 01.05.2014 19:21
Мнение одно - смотреть на сайт, по описанию догадаться сложно, что не так...
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Игорь 01.05.2014 19:11
К предыдущему комменту:
решил проблему добавив к стилям элементов ul и li нулевые padding и margin.
Появилась другая проблема: в правом углу - точка от ненумерованного списка. Но это легко решаемо. :D
Ответить | Ответить с цитатой | Цитировать
 
 
0 # admin 01.05.2014 19:22
Это решается правилом list-style:none ; в css.
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Val 20.11.2014 22:58
Привет! А помоги, пожалуйста, к этому слайдеру привязать картиночки для навигации (круглешки) Плз)
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Виталий 26.02.2016 00:48
Хреновый какой-то скрипт... Стили наворочены так что разбираться запаришься, почему бы не сделать стили относительно слайдера а не всего html документа? Получается, что если я вставлю такой слайдер себе на страницу - весь мой чудный дизайн поплывет к черту... И зачем то слайдер ограничен определенной шириной :)) ваще хохма...
Ответить | Ответить с цитатой | Цитировать
 
 
0 # an 28.04.2016 00:03
это еще норм..вы не видели других галимых кодов...короче в инете засрано все..пока найдеш толковое...
Ответить | Ответить с цитатой | Цитировать