Блог для начинающих веб разработчиков. 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. Там мы добавим новые возможности к данному скрипту.

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

Установил слайдер. На при просмотре на моем компьютере все хорошо и стрелки видны и кнопки (правда не квадратные а круглые выкладываю в сеть все стрелки и кнопки пропадают (сайт 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

gratis dejtingsajter i sverige porr for tjejer gratis porr sprutsugen dejting eslov dejting falkenberg dejting appar under 18 dejting forshaga dejting pa natet tips xx porr svenska porr tjejer gamla kvinnor porr emma porr dejting

falkenberg nakna tjejer porr dejting strangnas sex porr gay porr dejting appar sverige dejting uppsala gratis rysk porr kiss porr dejting surte gratis

dating app iphone dejting trollhattan dejting habo tube porr grupp porr dejting kumla amatorbilder porr

italiensk porr porr spel thastrom porr marta karlsson porr

dansk porr saker porr dejting vissla porr wikipedia porr hd ladda ner porr porr gamla dejting appar som tinder gay dating app sverige italiensk porr dejting sex dejting

lycksele basta dating app sverige porr for kvinnor dejting trollhattan fri svensk porr porr gamla kvinnor spansk porr

emo porr https://www.sunni.space/dejting-ostersund.html dejta tjejer fran ukraina https://www.sunni.space/free-porr.html dejtingsajter gratis

for unga https://www.sunni.space/hund-porr.html porr serier https://www.sunni.space/dejt.html dejting

laholm https://www.sunni.space/dejting-vetlanda.html dejting tomelilla https://www.sunni.space/bullfitta-porr.html shemale porr https://www.sunni.space/brudar-porr.html aldre damer porr

https://www.sunni.space/skon-porr.html erotic porr https://www.sunni.space/dejting-kinna.html dejtingsida for

gifta https://www.sunni.space/norsk-porr.html svensk

klassisk porr https://www.sunni.space/dejting-via-facebook.html basta dejting sajterna https://www.sunni.space/dejting-mariestad.html sm porr https://www.sunni.space/dejting-koping.html dejting malmo https://www.sunni.space/dejting-mariestad.html iran porr https://www.sunni.space/gratis-hd-porr.html dejting

oxelosund https://www.sunni.space/kina-porr.html dejting pa

natet tips https://www.sunni.space/dating-app-via-facebook.html porr

tidning https://www.sunni.space/dejta-tjejer.html porr

film https://www.sunni.space/italiensk-porr.html porr gratis https://www.sunni.space/svenska-porr-videos.html porr

videor https://www.sunni.space/pussy-porr.html dejting ostersund https://www.sunni.space/natdejting-basta-sidan.html porr i hd https://www.sunni.space/dejtingsajter-bast-i-test.html amator svensk porr https://www.sunni.space/dejting-karlskrona.html gratis porr aldre kvinnor https://www.sunni.space/dejting-appar-sverige.html dejting nykoping

сб, 2019-02-02 20:09

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

пн, 2013-12-16 21:37

sex slave dating flirt dating online online

dating for cougars free dating websites nyc best online dating emails dinner date app trucker dating site

uk asexual online dating

gay massage sex meth and sex

punish teens porn 4k porn free 50 over dating sites found ex girlfriend on dating site high school dating sites smart headlines dating site

young online dating online dating sites south australia best casual dating

sites which interracial dating site is the best nxnn porn emily osment porn adult date site widow online dating percy

jackson annabeth chase sex stories would you rather sex questions couples fetish dating sites sims 4 sex mod apk how to

pick a username for a dating site porn names over 60s online dating witty dating site headlines germany free online dating site

free sex porno 100

free dating sites for single parents uk best asian dating sites australia best dating site chicago best dating app android uk black dating sites free free dating online australia asperger dating websites safe free dating apps free dating sites in macon ga

saw my ex girlfriend on dating site free

dating site in europe amateur sex gif

dating site for pets ebony online dating london dating websites free sex type thing acoustic tab free online

dating adelaide

south florida dating websites https://www.glynda.space/online-dating-what-to-say-about-yourself.html active dating sites uk

https://www.glynda.space/top-rated-lesbian-dating-sites.html dating site for medical professionals https://www.glynda.space/friend-search-dating-site.html shemail sex https://www.glynda.space/disadvantages-of-online-dating.html christian sex life https://www.glynda.space/dating-app-free-chat.html japanese online dating chat https://www.glynda.space/any-good-free-date-sites.html good female dating profile names https://www.glynda.space/free-online-dating-sites-for-married.html date ideas los angeles area

https://www.glynda.space/female-online-dating-profile.html completely free dating sites no

registration https://www.glynda.space/free-dating-mobile-site.html online

dating halifax https://www.glynda.space/sex-second-date-good-bad.html online dating no response second email https://www.glynda.space/dating-apps-you-dont-have-to-pay-for.html york university dating sites https://www.glynda.space/east-european-dating-sites.html dating site tips for guys https://www.glynda.space/casual-sexting.html online dating expert julie spira https://www.glynda.space/online-dating-for-cheaters.html online dating in usa https://www.glynda.space/lesbian-scissor-porn.html short hair dating

sites https://www.glynda.space/what-is-the-most-successful-free-dating-site.html conversation starters online dating https://www.glynda.space/free-latina-sex-videos.html nice profile for dating

site https://www.glynda.space/christian-dating-app-london.html dog lovers dating site canada https://www.glynda.space/chatroulette-sex.html free dating

website new york https://www.glynda.space/mobile-dating-site-in-usa.html dating sites free for seniors https://www.glynda.space/nudist-dating-sites.html interracial dating

app uk https://www.glynda.space/xnxx-porn-videos.html top free online

gay dating sites https://www.glynda.space/dates-sites.html 100 free dating site app https://www.glynda.space/free-dating-site-in-belgium.html best online dating sites california https://www.glynda.space/dating-app-free-chat.html secret to online dating success

вт, 2019-02-05 03:27

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

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

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

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

bon plan cul gratuit plan cul gratuit sur rouen annuaire plan cul plan cul sur snap plan cul pour demain plan cul a alencon plan cul carvin plan cul local nantes

plan cul plan cul 94 annonce plan cul 77 plan cul avec mamie plan cul gay metz plan cul dijon gratuit plan cul sur blois plan cul bethune plan cul gay

haute savoie plan cul haute savoie plan cul villefranche plan cul gratuit 100 plan cul lavelanet plan cul dijon gratuit plan cul au

bois de boulogne comment trouver un plan cul gratuit

plan cul sur strasbourg plan cul vichy plan cul region plan cul au gabon site pour plan cul sans

inscription big kiss plan cul plan cul comment faire avis plan cul gratuit plan cul sur

annecy plan cul dans les ardennes plan cul avec

maman site serieux plan cul plan cul femme

enceinte plan cul cougar gratuit bon coin plan cul plan cul gratuit rennes

plan cul gradignan plan cul mayotte

plan cul 42 plan cul angouleme sms plan cul plan cul en indre et loire plan cul dans le

pas de calais quel est le meilleur site de plan cul recherche un plan cul

plan cul gratuit rennes

plan cul autour de chez moi

trouver un plan cul gay https://www.katheryn.space/plan-cul-au-gabon.htm plan cul gratuit sur toulouse https://www.katheryn.space/avis-plan-cul-seulement.htm plan cul cochonne https://www.katheryn.space/plan-cul-gratuit-en-auvergne.htm plan cul en drome https://www.katheryn.space/plan-cul-st-nazaire.htm plan cul gratuit sur nantes https://www.katheryn.space/annonce-plan-cul-lille.htm blog de

plan cul https://www.katheryn.space/plan-cul-dans-le-76.htm plan cul a cote de

chez toi https://www.katheryn.space/plan-cul-gay-dunkerque.htm plan cul gay

16 ans https://www.katheryn.space/plan-cul-maman.htm plan cul malakoff https://www.katheryn.space/numero-plan-cul-gratuit.htm plan cul gay ile de france https://www.katheryn.space/plan-cul-a-dax.htm plan cul lanester https://www.katheryn.space/plan-cul-gay-saint-gaudens.htm rencontre gratuite plan cul https://www.katheryn.space/plan-cul-hesdin.htm plan cul dans la drome https://www.katheryn.space/annonce-plan-cul-strasbourg.htm plan cul gay loire atlantique https://www.katheryn.space/bordeaux-plan-cul.htm plan cul a toulon https://www.katheryn.space/plan-cul-gay-martigues.htm numero de femme

pour plan cul https://www.katheryn.space/bon-site-plan-cul.htm plan cul dijon https://www.katheryn.space/plan-cul-blagnac.htm plan cul vieille https://www.katheryn.space/plan-cul-rapide-paris.htm plan cul dominatrice https://www.katheryn.space/plan-cul-nice.htm plan cul

08 https://www.katheryn.space/plan-cul-a-limoges.htm plan cul loiret https://www.katheryn.space/plan-cul-39.htm femme mure cherche plan cul https://www.katheryn.space/plan-cul-gay-16-ans.htm plan cul en ariege https://www.katheryn.space/plan-cul-sur-l-autoroute.htm plan cul

malgache https://www.katheryn.space/plan-cul-bisex.htm plan cul gay annonce https://www.katheryn.space/plan-cul-a-prague.htm plan cul en loire atlantique

пт, 2019-01-25 01:19

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

сб, 2014-01-11 16:13

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

сб, 2014-01-11 19:03

bonne black baise sexe femme mature

les femmes de la haute aiment la baise photo femme baise

hentai porno gratuit plus de sexe pute gand il baise dans le train site de porno mannequin challenge porno beurette

mature sodomisee baise ladyboy video baise dans le train film porno infirmiere

mature baise avec son fils blog porno sexe zarah beurette sexe liberte porno challenge film x amateur beurette porno asmr baise petite chatte partouze en corse beurette sur villeurbanne photo micro sexe sexe monstre branlette avec chaussette sabine la salope la salope oh la salope

elle baise sur la plage film porno vintage film francais porno complet men porno beurette de paname femme mature baise

jeune garcon site de porno baise aux champs

branlette a la campagne brune gros seins levrette film porno femmes mures photo sexe amat dessin anime sexe gratuit sexe landes kik salope vive le sexe sexe brigitte lahaie beurette hijab bonne baise beurette porno bffs femme mature en levrette jeux de sexe gratuit

vieille et jeune sexe https://www.earle.space/cul-levrette.html angelina jolie baise https://www.earle.space/black-baise-brune.html beurette de

nice https://www.earle.space/quiz-porno.html beurette avec des gros seins https://www.earle.space/salope-de-40-ans.html love randalin porno https://www.earle.space/porno-couple-mature.html video porno beurette de cite https://www.earle.space/scenes-porno.html porno irlandais https://www.earle.space/baise-entre-mec.html sexe tape francais https://www.earle.space/salope-de-bureau.html grosse mature baise https://www.earle.space/video-famille-sexe.html video pamela anderson baise https://www.earle.space/ado-nue-sexe.html beurette nue image https://www.earle.space/orgie-partouze.html suceuse de sexe

https://www.earle.space/noir-qui-baise.html baise nue https://www.earle.space/jeune-beurette-amatrice.html maman arabe porno https://www.earle.space/pute-a-poissy.html bouche pute julien dore

https://www.earle.space/nadia-salope.html partouze bi video https://www.earle.space/un-homme-qui-baise-une-femme.html porno lunette https://www.earle.space/video-branlette-ejac.html foto de pute https://www.earle.space/baise-au-lit.html forum

porno https://www.earle.space/sexe-inseste.html pute pour

ado https://www.earle.space/femme-salope-mure.html beurette gros nichons https://www.earle.space/baise-avec-des-cougars.html pute enculeuse https://www.earle.space/porno-hirsch.html pute sauvage https://www.earle.space/espion-baise.html sexe defloration https://www.earle.space/video-pute-au-bois.html jeux sexe flash gratuit https://www.earle.space/porno-peludas.html francaise branlette

пт, 2019-01-25 00:58

rencontre savoie rencontre femme lyon

site rencontre policier rencontre briancon rencontre 31 decembre rencontre gay douai rencontre hot rencontre transexuelles

site de rencontres ado nimes site de rencontre militaire site de rencontre

geek sans abonnement site de rencontre dunkerque bar rencontre

fontainebleau rencontre femme sete rencontre jura st

claude rencontre gers gratuit site

rencontre amis canada rencontre 100 gratuite rencontre web cam rencontre discrete gratuite vrai rencontre par tel rencontre gay lens

rencontre transexuelle paris message premiere rencontre rencontre tarifee

rencontre gay dordogne site de rencontre gratuit francais rencontre montargis rencontre musulmane gratuit hotel rencontres namur rencontre femme cougar

site de rencontre canadien gratuit

rencontre la celle saint cloud site de rencontre 49 rencontrer japonais lyon rencontres coquines metz site de rencontre laval gratuit site rencontre fantasme rencontre saint gaudens soiree rencontre celibataire granby rencontre trans sur paris rencontre femme russes faire rencontre

twitter forum rencontre seniors rencontre gay gironde site rencontre geek site de rencontre ado rhone alpes les sites de rencontre rencontre sur toulouse rencontre gay saone et loire rencontre timide

sites de rencontres pour ados https://www.casimira.space/bbw-rencontre.html site rencontre agricole gratuit https://www.casimira.space/numero-pour-faire-des-rencontres.html site de rencontre gratuit non payant

serieux sans inscription https://www.casimira.space/rencontre-fille-skype.html rencontre cholet https://www.casimira.space/rencontre-femme-cougar-gratuit.html rencontre vieille cougar https://www.casimira.space/rencontre-gay-bourges.html rencontre

gers https://www.casimira.space/amitie-et-rencontre-suisse.html site rencontre amicale gratuit https://www.casimira.space/comment-rencontrer-une-fille-de-l-est.html femme rencontre https://www.casimira.space/rencontre-discrete-gratuite.html rencontre coquine vaucluse https://www.casimira.space/tchat-rencontre.html rencontre amicale dans le lot

https://www.casimira.space/sexe-rencontre-lyon.html rencontre cavaillon https://www.casimira.space/rencontre-coquine-grenoble.html rencontres cantal https://www.casimira.space/rencontre-femme-musclee.html chat gratuit rencontre https://www.casimira.space/sortie-rencontre-bordeaux.html annonces gratuites rencontres https://www.casimira.space/rencontre-ado-celibataire.html rencontre le mans https://www.casimira.space/rencontre-gay-94.html site

de rencontre lesbienne https://www.casimira.space/rencontre-coquine-montauban.html cite de rencontre gratuit https://www.casimira.space/rencontre-en-ligne.html site rencontre homme

dubai https://www.casimira.space/rencontre-femme-russe-gratuit.html site de

rencontre gratuit pour cadres https://www.casimira.space/rencontre-geolocalisee.html sex rencontre paris https://www.casimira.space/carte-tarot-rencontre.html chat

et rencontre https://www.casimira.space/belle-photo-de-profil-site-de-rencontre.html site de rencontre pour homme fort https://www.casimira.space/rencontre-sodomie.html rencontres plan cul https://www.casimira.space/rencontre-divorce-monop.html rencontres senior montpellier https://www.casimira.space/rencontre-gay-22.html rencontre

bois de boulogne https://www.casimira.space/agence-de-rencontre-gratuite.html site de rencontre avec webcam

пт, 2019-01-25 12:08

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

Василий
вс, 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

sanne dansk porno dating sites sex privat dansk porno dansk porno erika netdat sex dating sites

dating sider i danmark porno dansk tale gratis

date side hater dating app dansk porno

model dating holstebro dansk

porno solo porno tube dansk dansk porno soffie dansk live porno danske porno danske mette porno dansk hjemme

porno anita dansk porno gamle dansk

porno sex date dk moden dansk porno dating dk app danske porno videoer gratis chat dating dansk porno ashley

dating frederikshavn dansk porno klip dating for unge gratis dansk porno online dansk lesbisk porno sex

dating app free casual dating apps dansk porno dvd danske mia porno

gratis porno med danske piger sex chat dating dating apps gratis 100 free sex dating sites

bbw sex dating gratis dating side smartphone

dating apps danske amatorer porno free mobile dating apps hot dating app homo dating

sider 100 free sex dating sites dansk bdsm porno dansk lesbisk porno gratis online dating

danske porno video https://www.layne.space/dating-skive.html dansk porno kitti https://www.layne.space/sex-dating-sites.html danske michelle porno https://www.layne.space/zenia-dansk-porno.html dansk porno film

gratis https://www.layne.space/dating-for-unge-under-18-gratis.html dansk teenage porno https://www.layne.space/dansk-porno-anal.html helt gratis dating https://www.layne.space/dansk-husmor-porno.html danske

dating sider https://www.layne.space/dateing-sex.html dansk porno sex

https://www.layne.space/sex-chat-dating.html app dating iphone https://www.layne.space/dating-taastrup.html helt gratis dating https://www.layne.space/dansk-porno-teen.html dating sider senior https://www.layne.space/dating-dk-app.html dansk

porno sexdebut https://www.layne.space/dating-site-gratis.html mature sex dating https://www.layne.space/porno-dansk-amator.html klassisk dansk porno https://www.layne.space/dansk-ny-porno.html dansk familie porno https://www.layne.space/gratis-porno-dansk.html dating app sex https://www.layne.space/gamle-danske-porno-film.html dansk sm porno https://www.layne.space/dansk-porno-video.html dating aalborg https://www.layne.space/sex-dating-and-relationships.html top ten dating apps https://www.layne.space/dansk-homo-porno.html oral sex dating https://www.layne.space/dansk-porno-solo.html dansk hd

porno https://www.layne.space/dansk-porno-onani.html dating sider for homoseksuelle https://www.layne.space/dansk-porno-piger.html sex dating free https://www.layne.space/danske-piger-i-porno.html american dating app https://www.layne.space/dating-apps.html gratis

sex dating sider https://www.layne.space/dansk-sex-porno.html gratis date

чт, 2019-01-24 21:51

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

Артём
чт, 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

dating bergen date kvinner i hamar norsk porno russ beste dating apper kontaktannonser

dating nettdating tips for menn date kvinner i sandefjord nettdate tips norske porno jenter beste dating app gratis date kvinner i mandal 100 gratis datingsider norsk porno side date trondheim

mote nettdate hjemmelaget norsk porno gratis sms dating i norge bedste gratis dating sites serios dating pa nett date kvinner i jessheim dating pa nett tips dating norge gratis date kvinner

i alta finn damerau

norsk russ porno singel i trondheim date

kvinner i drammen dating pa nett test date kvinner i alesund

norsk amator porno norwegian dating

dating app norge norsk teen porno date nettsteder date i

bergen date kvinner i stjordalshalsen norsk porno

forum norske jenter i porno date kvinner i larvik popul kristen dating pa nett

gratis dating sider i norge date bergen chattesider pa nett norske

jenter porno mote eldre damer pa nett dating pa nett norsk porno online beste dating nettsted date nettsteder nettdating norge

gratis datingsider https://www.luvenia.club/norske-jenter.html chat sider pa nettet https://www.luvenia.club/gratis-dating-norge.html norsk porno hd https://www.luvenia.club/norske-jenter-porno.html kvinner soker menn https://www.luvenia.club/norsk-porno-side.html norsk snapchat porno https://www.luvenia.club/norsk-porno-skogtur.html beste datingside norge https://www.luvenia.club/norske-porno-skuespillere.html hvordan mote damer

https://www.luvenia.club/kontaktannonser-pa-nett.html beste dating site https://www.luvenia.club/dating-pa-nett-gratis-norge.html date kvinner

i tonsberg https://www.luvenia.club/gratis-dating-norge.html mote

eldre kvinner oslo https://www.luvenia.club/ dating nettsteder i norge https://www.luvenia.club/dating-apper.html chat med

jenter https://www.luvenia.club/mote-kvinner.html norsk porno online https://www.luvenia.club/beste-norske-datingsider.html date app norge

https://www.luvenia.club/gratis-dating-nettsteder.html date kvinner i harstad https://www.luvenia.club/gratis-nettdating-norge.html date kvinner i harstad

https://www.luvenia.club/date-kvinner-i-lillehammer.html norsk hd porno https://www.luvenia.club/gratis-dating-sider-for-gifte.html mote

kvinner https://www.luvenia.club/date-kvinner-i-ski.html finn dameron https://www.luvenia.club/dating-i-oslo.html seriose norske

datingsider https://www.luvenia.club/dating-nettsteder-i-norge.html helt gratis norsk

dating chat https://www.luvenia.club/sex-dating-oslo-gratis.html norwegian dating https://www.luvenia.club/gratis-sms-dating-norge.html sex dating oslo gratis

https://www.luvenia.club/kontaktannonser-pa-nett.html beste gratis dating

app norge https://www.luvenia.club/nettdating-sider.html mote kvinne https://www.luvenia.club/nettdate-tips.html beste dating nettside

пт, 2019-01-25 00:50

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

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

Отлично!
А скажите, как сделать слайдер из нескольких картинок?
То есть, чтобы была не одна картинка, а несколько...например, как здесь http://elemisdesign.com/demos/carousel/light/index.html

Лидия
ср, 2014-11-05 07:34

Faraday, пожалуйста свяжись со мной, нужна твоя помощь, заранее спасибо)))
мой id в вк http://vk.com/nekuryashka51

Татьяна
сб, 2014-12-06 23:18

Faraday, еще раз привет))) если все же увидишь сообщение, большая просьба, когда будешь добавляться в друзья, напиши что нить, а то я обычно удаляю, всех незнакомцев.....вот недавно кого то отклонила...ты не ты был...

Татьяна
пн, 2014-12-08 14:35

Благодарю за отличный и очень простой слайдер. Немного доработал вид и функционал.
Можете посмотреть здесь:
http://needfull.net/video/668-videoklip-ani-lorak-medlenno

вт, 2014-12-09 00:10

Добрый день! Подскажите по следующей ситуации: один и тот же код слайдера на всех страницах сайта (include). Очень не нравится что при сёрфинге по сайту как и положенно слайдер начинает показ картинок с первой. Есть ли какие то методы которые могут мне помочь в данной ситуации.

Максим
сб, 2014-12-13 14:23

Слайдер супер !!! Спаси БОГ!
Подскажите пожалуйста, как отключить автоматический слайд-шоу ?)

Дмитрий
пт, 2015-01-16 01:17

Страницы

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