Блог для начинающих веб разработчиков. HTML, СSS, Jquery, Drupal и другое.

→ Делаем простой слайдер на jQuery

Опубликовано: 13 апреля 2012

Некоторое время назад, я начал осваивать jQuery. Думаю, все знают, что так называется самая популярная библиотека для разработки и создания сценариев (скриптов) на JavaScript. С её помощью очень просто создавать эффектные и интерактивные элементы сайта.

В этой статье, хочу рассказать, как создать простой универсальный слайдер с использованием jQuery. На самом деле, в сети очень большое количество разнообразных готовых слайдеров, которые порой выглядят очень заманчиво, и достаточно функциональны, но мы сделаем его с нуля.

Итак, какие особенности нашего слайдера на jQuery (который я назвал HWSlider) можно отметить?

  • Простота использования и оформления – я хотел создать простой сценарий без наворотов, поэтому, я не использовал анимации на CSS3, а код получился очень универсальным  и понятным.
  • Возможность вставлять в слайды как изображения, так и любой HTML – код.
  • Возможность прокручивать слайды как по порядку (вперёд - назад), так и выбирать каждый слайд (1,2,3,4…)
  • Автоматически формирующиеся ссылки (предыдущий – следующий, и с номерами слайдов). Вам нужно лишь вставить нужное количество div-ов, а всё остальное рассчитается само. Ну и можно отметить, что количество слайдов неограниченно.

Скрипт совместим со всеми современными браузерами: IE, Opera, Firefox, Safari, Chrome, (т.к. слайдер не использует CSS3).

ДемоСкачать

Начнём с HTML разметки. В нужное место html страницы или шаблона нужно вставить.

<div id="slider-wrap">
	<div id="slider">
		<div class="slide">Здесь содержание слайда 1</div>
		<div class="slide">Здесь содержание слайда 2</div>
		<div class="slide">Здесь содержание слайда 3</div>
	</div>
</div>

Здесь всё просто, как видно, вы можете вставлять сколько угодно слайдов путём создания новых div-ов. Внутрь их можно вставлять любой html код, например картинку или блок с текстом. Не забудьте только подключить саму библиотеку на jQuery в вместе со всеми js - скриптами. Если не знаете как, смотрите в примере.

Далее рассмотрим CSS. Это разметка стилей для нашего jQuery - слайдера. Вставьте код, что приведён ниже в файл стилей (css - файл) вашего сайта или темы.

#slider-wrap{ /* Оболочка слайдера и кнопок */
	width:660px; 
	}
#slider{ /* Оболочка слайдера */
	width:640px;
	height:360px;
	overflow: hidden;
	border:#eee solid 10px;
	position:relative;}
.slide{ /* Слайд */
	width:100%;
	height:100%;
	}
.sli-links{ /* Кнопки смены слайдов */
	margin-top:10px;
	text-align:center;}
.sli-links .control-slide{
	margin:2px;
	display:inline-block;
	width:16px;
	height:16px;
	overflow:hidden;
	text-indent:-9999px;
	background:url(radioBg.png) center bottom no-repeat;}
.sli-links .control-slide:hover{
	cursor:pointer;
	background-position:center center;}
.sli-links .control-slide.active{
	background-position:center top;}
#prewbutton, #nextbutton{ /* Ссылка "Следующий" и "Педыдущий" */
	display:block;
	width:15px;
	height:100%;
	position:absolute;
	top:0;
	overflow:hidden;
	text-indent:-999px;
	background:url(arrowBg.png) left center no-repeat;
	opacity:0.8;
	z-index:3;
	outline:none !important;}
#prewbutton{left:10px;}
#nextbutton{
	right:10px;
	background:url(arrowBg.png) right center no-repeat;}
#prewbutton:hover, #nextbutton:hover{
	opacity:1;}

Давайте разберём его подробнее. Сначала мы даём основному блоку с идентификатором "slider-wrap", нужную ширину. Так как в него вставляются все остальные блоки, то высоту можно не задавать, она будет зависеть от того, что будет внутри. Затем нам нужно задать размеры контейнера в котором будут находиться слайды. Это – #slider. Зададим ему ширину и высоту, а так же, к примеру, границу в 10 пикселей. Здесь ширина – 640px это меньше чем ширина родителя, так как мы добавляем границы шириной по 10px справа и слева. От ширины этого div-а так же зависит и ширина самих слайдов ( .slide).

И последнее: нам нужно обязательно задать position:relative для контейнера слайдов так как слайды внутри - с абсолютным позиционированием. Для самих слайдов в CSS задаётся только ширина и высота. Остальные свойства задаются уже в jQuery скрипте.

Селектор .sli-links это блок, в котором будут находится кнопки перехода на необходимый слайд. Эти кнопки представляют из себя простые элементы вида <span class="control-slide">номер</span>, которые вставятся в необходимом количестве автоматически, вместе и с их родителем .sli-links. Для кнопок мы задаём красивый вид, а именно делаем каждую кнопку квадратной, выравниваем их все по центру, а так же, благодаря overflow:hidden и text-indent:-9999px, убираем текст, оставляя только фоновые иконки, которые так же меняются при наведении на этот элемент курсора. Для удобства я использовал спрайты, что уменьшило количество изображений.

Далее оформляется активная кнопка. Просто изменяем положение фона. Затем переоформим ссылки для перехода на сдедующий и предыдущий слайды. Вы можете дать им любое оформление, так же как и кнопкам. Данные ссылки вставляются автоматически внутрь #slider. Но чтобы их было видно, я задал им абсолютное позиционирование и верхний слой (z-index:3), чтобы они были отображены над слайдами. Думаю с CSS здесь всё понятно и просто: вы можете поменять практически все свойства, чтобы оформить слайдер так, как вам необходимо.

Давайте теперь рассмотрим сам сценарий:

var hwSlideSpeed = 700;
var hwTimeOut = 3000;
var hwNeedLinks = true;

$(document).ready(function(e) {
	$('.slide').css(
		{"position" : "absolute",
		 "top":'0', "left": '0'}).hide().eq(0).show();
	var slideNum = 0;
	var slideTime;
	slideCount = $("#slider .slide").size();
	var animSlide = function(arrow){
		clearTimeout(slideTime);
		$('.slide').eq(slideNum).fadeOut(hwSlideSpeed);
		if(arrow == "next"){
			if(slideNum == (slideCount-1)){slideNum=0;}
			else{slideNum++}
			}
		else if(arrow == "prew")
		{
			if(slideNum == 0){slideNum=slideCount-1;}
			else{slideNum-=1}
		}
		else{
			slideNum = arrow;
			}
		$('.slide').eq(slideNum).fadeIn(hwSlideSpeed, rotator);
		$(".control-slide.active").removeClass("active");
		$('.control-slide').eq(slideNum).addClass('active');
		}
if(hwNeedLinks){
var $linkArrow = $('<a id="prewbutton" href="#"></a><a id="nextbutton" href="#"></a>')
	.prependTo('#slider');		
	$('#nextbutton').click(function(){
		animSlide("next");

		})
	$('#prewbutton').click(function(){
		animSlide("prew");
		})
}
	var $adderSpan = '';
	$('.slide').each(function(index) {
			$adderSpan += '<span class = "control-slide">' + index + '</span>';
		});
	$('<div class ="sli-links">' + $adderSpan +'</div>').appendTo('#slider-wrap');
	$(".control-slide:first").addClass("active");
	
	$('.control-slide').click(function(){
	var goToNum = parseFloat($(this).text());
	animSlide(goToNum);
	});
	var pause = false;
	var rotator = function(){
	if(!pause){slideTime = setTimeout(function(){animSlide('next')}, hwTimeOut);}
			}
	$('#slider-wrap').hover(	
		function(){clearTimeout(slideTime); pause = true;},
		function(){pause = false; rotator();
		});
	rotator();
});

Сначала в переменных сохраняются настройки: hwSlideSpeed - скорость перелистывания слайдов, hwTimeOut - время спустя которое происходит автоматическая смена слайда, hwNeedLinks - управляет ссылками "Следующий " и "Предыдущий" - если значение этой переменной равно true, то эти ссылки будут отображаться, а если false, то соответственно их не будет (как на главной странице моего блога).

Далее мы устанавливаем необходимые CSS свойства для слайдов с помощью метода .css(). Блоки со слайдами мы накладываем друг на друга используя абсолютное позиционирование, затем скрываем их все .hide(), а затем показываем только первый. Переменная slideNum - это номер активного слайда, то есть счётчик.

Основная логика работы нашего jQuery слайдера - это функция animSlide. Она принимает один параметр. Если мы передадим в неё строки "next" или "prew", то сработают условные операторы и будет отображён соответственно следующий или предыдущий слайд. Если же мы пошлём в качестве значения цифру, то это число станет активным слайдом и он будет показан.

Таки образом эта функция скрывает текущий div, высчитывает новый и показывает его.

Обратите внимание, что методу .fadeIn(), который делает видимым активный слайд, задан второй аргумент. Это, так называемая функция обратного вызова. Она выполняется, когда слайд полностью появится. В данном случае это сделано для обеспечения автоматической прокрутки слайдов. Функция rotator, определённая ниже, вызывает снова функцию animSlide для перехода на следующий слайд через необходимый нам интервал времени: мы получим замыкание, обеспечивающее постоянную прокрутку.

Всё работает нормально, но нам нужно остановить выполнение автоматики, если пользователь подводит курсор к слайдеру, или нажимает кнопки. Для этого создана переменная pause. Если её значение положительно - true, значит автоматического переключения не будет. С помощью метода .hover(), мы указываем: очистить таймер если он запущен - clearTimeout(slideTime), и установить pause = true. А после отвода курсора, отключить паузу и запустить замыкание rotator(). 

Дополнительно нам нужно создать новые элементы на странице и поместить их в нужное место. Используя цикл each() для каждого слайда (div-а с классом .slide), создадим элемент span внутри которого бует число - номер слайда. Это число используется в функции анимации, для перехода к слайду с этим номером. Обернём всё в div с нужными классами, и в итоге получим такую разметку:

<div class="sli-links">
  <span class="control-slide">0</span>
  <span class="control-slide">1</span>
  <span class="control-slide">2</span>
  <span class="control-slide">3</span>
</div>

Затем если в настройках указано, что ссылки "следующий - предыдущий" нужны, то создадим и их, и сразу повесим на них обработчики. В качестве обработчика клика используем ту же самую функцию animSlide, с аргументами "next" и "prew". 

Казалось бы, зачем мы создаём разметку внутри скрипта, а не в HTML коде?. Дело в том, что например, если у пользователя отключены скрипты - он не увидит элементов, которые не будут работать, и это не введёт его в замешательство. Кроме того упрощается код, что неплохо для SEO.

В итоге разметка слайдера будет выглядеть примерно так (в качестве слайдов я использовал изображения, и установил 5 штук):

<div id="slider-wrap">
  <div id="slider">
    <a id="prewbutton" href="#">&lt;</a>
    <a id="nextbutton" href="#">></a>
    <div class="slide" style="position: absolute; top: 0px; left: 0px; display: none">
      <img src="img/001.jpg" width="640" height="360">
    </div>
    <div class="slide" style="position: absolute; top: 0px; left: 0px; display: none">
      <img src="img/002.jpg" width="640" height="360">
    </div>
    <div class="slide" style="position: absolute; top: 0px; left: 0px; display: none">
      <img src="img/003.jpg" width="640" height="360">
    </div>
    <div class="slide" style="position: absolute; top: 0px; left: 0px; display: block">
      <img src="img/004.jpg" width="640" height="360">
    </div>
  </div>
  <div class="sli-links">
    <span class="control-slide">0</span>
    <span class="control-slide">1</span>
    <span class="control-slide">2</span>
    <span class="control-slide active">3</span>
  </div>
</div>

Ниже вы можете посмотреть, как работает наш jQuery слайдер на демо странице, и скачать все необходимые исходники.

ДемоСкачать

На напоследок, пару моментов об интеграции этого слайдера с Drupal. Вы можете добавить этот код в файл шаблона, например в page.tpl.php, и прикрепить скрипт отдельными js-файлом к теме. Jquery в Drupal включен по умолчанию, но работает в режиме совместимости (подробнее). Есть два варианта доработки. Либо обернуть весь js код:

(function ($) {
  // Весь ваш код...
})(jQuery);

или заменить символы $ во всём скрипте на jQuery. Вот так:

jQuery(document).ready(function(e) {
	jQuery('.slide').css(
		{"position" : "absolute",
		 "top":'0', "left": '0'}).hide().eq(0).show();
	var slideNum = 0;
	var slideTime;
	slideCount = jQuery("#slider .slide").size();
	var animSlide = function(arrow){
// и т. д.

В примере уже реализован первый метод.

Спасибо за прочтение! Оставляйте комментарии, приходите ещё. А так же вы можете подписаться на RSS, чтобы получать обновления блога первыми! 

Добавлено: Это ещё не всё. Читайте следующую статью о HWSlider. Там мы добавим новые возможности к данному скрипту.

Поделиться:
Комментарии

Спасибо, отличная вещь. А как можно сделать sli_links поверх самого слайда?

Уктам
вт, 2013-07-02 14:16

Можно, если применить абсолютное позиционирование:

Для #slider-wrap нужно добавить position:relative; а для .sli-links:


position:absolute;
top:200px;
left:200px;
z-index:3;

с помощью top и left поставить кнопки в нужное место, а z-index на всякий случай, чтобы ссылки не перекрывались.

Faraday
чт, 2013-09-05 20:51

Спасибо, отличный слайдер.

Marina
пн, 2013-07-08 11:09

Автору респект за такой слайдер и подробное описание! Все гениальное просто!

Роман
пн, 2013-07-29 15:41

Объясните, пожалуйста, не грамотному программисту, куда нужно сохранять сценарий. Вставил слайдер, залил картинки, все работает, но при нажатии на кнопки ничего не происходит, так куда же надо добавить файл jquery1-7-2?

Иван
сб, 2013-08-03 18:35

очень крутой слайдер, очень легко настраивается и четко работает, то что искал. много всякого сложного шлака, а вот именно таких, как этот очень мало. автор большое спасибо! респиктосик и уважуха!

чт, 2013-08-15 00:45

Добрый день! Отличный слайдер, вставил себе на страницу, все ок, но содержимое слайда (изображения, как и у Вас) сползают. Получается, что рамка есть, а само изображение ополовинено. Может, подскажете, в чем может быть дело? Спасибо!

Alex
чт, 2013-09-05 18:45

Может быть проблема в каких-то CSS дополнительных, но не только. Дайте ссылку если возможно, тогда скажу больше.

Faraday
чт, 2013-09-05 20:47

Доброго дня! Проблему решил, дело действительно было в CSS, спасибо за ответ).

Alex
пт, 2013-09-06 14:02

не работает на wordpress. почему скрипт начинается со скобки "(" ? у меня ни отдельный файлом .js не работает, ни при добавлении в functions.php

дмитрий
вт, 2013-10-08 01:10

Здраствуйте! Очень хороший слайдер!
Если человек вмешался автоматическую прокрутку слайдера (кликнул на стрелочку или кружочек), тогда автоматическая прокрутка заканчивается. И уже слайды только сам человек может перелистывать. Если он 8 секунд ничего не делал (не кликал ни на стрелочку, ни на кружочек). Тогда через 8 секунд слайдер опять начинает автоматом крутиться.

Дмитрий
ср, 2013-10-09 13:31

Отличный слайдер! Только внес кое какие изменения. Для того чтобы при клике на ссылки(кнопки)
<
>

браузер не переходил на новую страницу www.vashsite.ru/#

В скрипт на каждую кнопку добавил по одной строчке return false;
animSlide("next");
return false;
})
$('#prewbutton').click(function(){
animSlide("prew");
return false;
})

Денис
сб, 2013-10-12 19:20

День добрый, прикрутил ваш слайдер, выдает такую ошибку. Точнее целых две:
1)Uncaught TypeError: Object [object Object] has no method 'chosen'
2)Uncaught TypeError: Object [object Object] has no method 'anythingSlider'
Что я сделал не так? помогите пожалуйста

max3l
пн, 2013-11-04 19:09

Установил слайдер. На при просмотре на моем компьютере все хорошо и стрелки видны и кнопки (правда не квадратные а круглые выкладываю в сеть все стрелки и кнопки пропадают (сайт http://www.bst3m.ru/micr/50.html Разметка следующая

<style type="text/css">
#slider-wrap{ /* Оболочка слайдера и кнопок */
    width:478px; margin:0 auto;
    }
#slider{ /* Оболочка слайдера */
    width:480px;
    height:480px;
    overflow: hidden;
    border:1px solid #999;
    position:relative;
    margin:0 auto;}
.slide{ /* Слайд */
    width:100%;
    height:100%;
    position: absolute; 
    top: 0px; 
    left: 0px; 
    display: none;
      }
.slide img {
    width:478px;
    height:478px;
    margin: 1px;
    }
      
.sli-links{ /* Кнопки смены слайдов */
    margin-top:10px;
    text-align:center;}
.sli-links .control-slide{
    margin:2px;
    display:inline-block;
    width:16px;
    height:16px;
    overflow:hidden;
    text-indent:-9999px;
    background:url(sl/radioBg.png) center bottom no-repeat;
    }
.sli-links .control-slide:hover{
    cursor:pointer;
    background-position:center ;}
.sli-links .control-slide.active{
    background-position:center top;}
#prewbutton, #nextbutton{ /* Ссылка "Следующий" и "Предыдущий" */
    display:block;
    width:15px;
    height:100%;
    position:absolute;
    top:0;
    overflow:hidden;
    text-indent:-999px;
    background:url(sl/arrowBg.png) left center no-repeat;
    opacity:0.8;
    z-index:3;
    outline:none !important;}
#prewbutton{left:10px;}
#nextbutton{
    right:10px;
    background:url(sl/arrowBg.png) right center no-repeat;}
#prewbutton:hover, #nextbutton:hover{
    opacity:1;}	</style>

html

<div id="slider-wrap">
	<div id="slider">
		<div class="slide">
			<img src="sl/1.jpg" /></div>
		<div class="slide">
			<img src="sl/2.jpg" /></div>
		<div class="slide">
			<img src="sl/3.jpg" /></div>
		<div class="slide">
			<img src="sl/4.jpg" /></div>
		<div class="slide" style="display: block">
			<img src="sl/5.jpg" /></div>
	</div>
	<div class="sli-links">
		&nbsp;</div>
</div>

Скрипт без изменений

фридрих
пн, 2013-11-18 15:13

Вижу вы уже установливи другой слайдер на странице, но всётаки попробую ответить.

Вам нужно правильно прописать адреса картинок. в html например

<img src="sl/1.jpg" /></div>

Это значит картинка лежит в папке sl которая в на одном уровне с html страницей. Попробуйте абсолютный адрес (начинающийся с /) он отсчитывает адрес с корня сайта, например

<img src="/images/1.jpg" /></div>

Картинка находится в папке images, которая лежит в корне сайта.

Тоже самое следует сделать с значением фона в CSS

 background:url(/images/arrowBg.png) left center no-repeat;

Например так (обратите внимание на адрес фона стрелки).

Faraday
ср, 2013-11-20 22:58

Спасибо автору! Доступно и понятно! Как раз то, что искала!

пн, 2013-12-16 21:37

Отличный слайдер, установила без особых сложностей. Единственное не видно ни одной кнопочки. Куда их нужно прописывать? Это не поняла.. буду благодарна если подскажите.

Лариса
вт, 2013-12-17 21:08

Доброго времени суток! Большое спасибо автору за статью, много чего для себя понял, но так как я не программист, никак не могу разобраться как разместить его по центру страницы, у меня он привязан к левому краю. Спасибо!

Николай
чт, 2013-12-26 23:27

Привет. Отличная тема. Подскажи пожалуйста что такое может быть - при нажатии на любую из стрелок, перекидывает вверх страницы.
http://vashakrovlja.ru/stropilnaja_sistema/stropila/
слайдер в конце страницы.

сб, 2014-01-11 16:13

Спасибо...уже не надо, решил не ждать, поставил другой.

сб, 2014-01-11 19:03

как избавиться от зацикливания анимации , при нажатии несколько раз на будет перехода , зацикливается анимации и происходит несколько раз... было бы не плохо , если бы вы помогли разобраться с этой проблемой(

Василий
вс, 2014-01-19 16:33

я уже сам все поправил , спасибо за слайдер , хорошая база для наработок

Василий
вс, 2014-01-19 17:17

подскажите, можно ли оболочку слайдера и сам слайдер сделать не фиксированной ширины и высоты, а в процентах?

Галя Кулакова
сб, 2014-01-25 23:57

Впринципе можно, только нужно придумать что-то внутри слайда, чтобы там содержимое было нужной ширины.

В CSS поменять нужно следующее:

#slider-wrap{ /* Оболочка слайдера и кнопок */
    width:70%; /* Тут будет размер в процентах, например 70 */ 
    }
#slider{ /* Оболочка слайдера */
    width:70%; /* и тут такой же */ 

 /* остальное всё идентично, т.к. сам слайд уже растягивается до 100% */ 
Faraday
пн, 2014-01-27 14:20

Уважаемый автор,а как немного переделать навигацию, чтоб она стала кликательной в виде блоков с информацией(они не должны добавляться JS).К примеру жмем на блок - один слайд,жмем на последний блок,появляется последний.Без всяких булитов снизу и стрелочек,просто навигация трех слайдов.

Сергей
ср, 2014-01-29 04:11

Спасибо за статью, здесь я нашел то, что искал)

Роман
сб, 2014-02-01 04:10

не работает в EI ((

Евгений
пт, 2014-02-07 06:01

Добрый день...
Подскажите пожалуйста, каким образом можно анимировать содержимое в каждом .slade например выезд слева и справа для каждого класса slade свое изображение...

например как в http://www.themepunch.com/codecanyon/revolution_wp/

beta
пн, 2014-03-03 07:36

Слайдер оч крутой и по его установке все понятно! А можно ли сделать так чтоб эффект слайдера был не затухание а чтоб картинки выезжали сбоку?

iLias
вт, 2014-03-04 13:33

Сделал слайдер, как профи) Хотя в вэб дизайне ничего не понимаю. Как раз с боку выезжают http://www.pxpress.ru/ он в середине странице стоит. Если что могу научить как.

Дмитрий
вт, 2014-04-01 15:18

Красиво получилось, отлично подходит к окружающим блокам :)

Faraday
сб, 2014-04-05 16:59

Спасибо очень пригодилось.
Отличный слайдер

Артём
чт, 2014-03-13 21:55

ОТличный слайдер
Спасибо очень пригодился

Артём
чт, 2014-03-13 21:56

Как сделать его не зависимым от ширины, если высоту не указывать то по умолчанию стоит 0

Павел
ср, 2014-03-26 16:44

Добрый день, уже два дня бюсь над тем, чтобы сделать отображение начиная не с первого слайда! Проставляю var slideNum но оно все равно отображает первый слайд

чт, 2014-04-10 15:03

Сейчас проверить не могу, но что если поменять:

$(document).ready(function(e) {
    $('.slide').css(
        {"position" : "absolute",
         "top":'0', "left": '0'}).hide().eq(1).show();
    var slideNum = 1;

т.е. будет eq(1) а не 0 и var slideNum = 1 а не ноль. Если я не пропустил чего, то должен появляться сначала второй слайд, а по второму кругу как обычно с первого.

И да, ещё сменить нужно будет в переключалках:

$(".control-slide:eq(1)").addClass("active");

т.е вместо .control-slide:first будет .control-slide:eq(1)

Faraday
вс, 2014-04-20 10:41

Респект тебе Великий Мастер)))) я не дружу со скриптами и уже вечность ищу как заставить фотки меняться на страницы......а тут чудо...Спасибо

SeriyShevchik
ср, 2014-04-23 15:57

Вроде бы отлично всё работает норм слайдер но как на счёт того что он не привязан к пунктам меню? Переключись с главной на любой пункт и слайдеру ппц...

Benefactor
вс, 2014-07-06 13:53

Да, есть такое, ведь скрипт писался как можно проще, так что это не учтено.

С другой стороны, на сайтах часто такое бывает, что слайдер просто прокручивает какую-то информацию по кругу и его состояние не требуется сохранять.

Faraday
вс, 2014-07-06 18:44

Очень хорошая статья, спасибо!
Но вообще хотелось бы, чтобы более подробно разбирали js/jq код.
Я как раз его изучаю сейчас и пока не до конца понял как работает этот скрипт

Григорий
пт, 2014-08-08 01:00

Хорошо, в будущем постараюсь подробнее. Спасибо :)

Faraday
пт, 2014-08-08 21:15

Я провел целый день разбирая скриптовый файл, ну и в общем полностью разобрался что к чему))Радости нет предела!
Ну и уверен от большого количества "новичков" добавлю :"пожалуйста, продолжайте писать подобного рода статьи."
Я на самом деле очень рад что наткнулся на ресурс, который вещает о современных способах верстки, и основывается на не безвкусных примерах

Григорий
вс, 2014-08-10 08:07

Спасибо, очень рад таким комментариям. Постараюсь в ближайшем будущем опубликовать ещё что-нибудь по JS

Faraday
вс, 2014-08-10 13:30

Добрый день автор! Воспользовался вашим сладером очень нравится. Но не смог разобраться как правильно его позиционировать на моем сайте. Верстаю в dreamweaver, очень напрягает расположение slide, они располагаются по стандартному методу (по тексту) на всю длину экрана, а если изображений много то и больше. Как позиционировать слайдер! ведь границы slider-wrap мешают другим div-ам

Евгений
ср, 2014-08-13 09:52

Здравствуйте, спасибо :) Вот не совсем понятно без примера. .slide - это блок со слайдом. Как только скрипт в браузере запускается, все эти div-ы скрываются, в одно время виден только один из них.

Меняя ширину .slider-wrap и .slider, вы сможете расширить или уменьшить размер слайдов (т.е. и сами .slide станут меньше, т.к. они в процентах от родителя заданы).

Так же можно задать маржины для #slider-wrap, чтоб он по центру был, или с отступами какими-нибудь и.т.д.

Если вам нужно именно сверстать что-то внутри слайда, но незапуская в браузере, то можно убрать временно все слайды и оставить только один, и верстать поочереди :)

Faraday
ср, 2014-08-13 19:58

большое спасибо!

Евгений
пн, 2014-08-18 07:37

Огромное спасибо за скрипт, за то как подробно рассказано что к чему, даже я поняла))) Ваша работа безценна. И хочу присоединиться к комментам выше: тоже жду с нетерпением новых статей.
Ваш сайт у меня в закладках.

Ирина
пт, 2014-08-29 17:51

Спасибо, то что искал

Гость
чт, 2014-09-11 00:12

Окай, а где менять сам вид анимаци? если я хочу чтобы слайды не выцветали а шли славо на право?

Алексей
пн, 2014-09-22 18:22

Отличный инструмент, нужно было нечто похожее для текста, переделал под себя, работает на всех браузерах и устройствах. Только не могу сделать, чтобы высота изменялась автоматически, в зависимости от контента

Denis
сб, 2014-09-27 19:10

Страницы

Комментировать