Простой слайдер с горизонтальной прокруткой (циклический)

Фикс от 18 января 2013:
Устранен баг с автопрокруткой при переключении вкладок или при сворачивании окна браузера. Убрана проверка наличия атрибута name у ссылок вперед/назад.
Обновлен архив с исходниками.
Фикс от 19 июня 2013:
Добавлена возможность использовать несколько слайдеров на странице, пока без поддержки автопрокрутки, поэтому архив с исходниками и страницу демо не обновлял.
Поправил баг появления картинок под стрелочками
О том как запустить автопрокрутку без нажатия на кнопку play я ответил во втором комментарии

Слайдеры (ротаторы контента[изображений, текста, видео]) присутствуют в каждом проекте. В интернете, реально, куча проектов, где можно скачать и подобрать по своему вкусу практически любой плагин слайдера. Однако, бывают ситуации, когда подключать к проекту слайдер, минимизированная версия которого весит от 10Кб — нецелесообразно.

Простой слайдер с горизонтальной прокруткой своими руками

Допустим, Вам требуется сделать слайдер, который содержит 15-20 картинок с подписями или пару тройку видеороликов. Именно для таких случаев Вам и пригодится данный урок, где Вы научитесь делать слайдер с горизонтальной прокруткой, причем не оптимизированный скрипт будет весить меньше 2Кб. Нажав ниже кнопку «Demo» Вы можете посмотреть демонстрацию урока, а кликнув по кнопке «Source», получите архив урока (с комментариями), кстати чтобы научиться делать простой слайдер на миниатюрах прочтите эту статью.

Для понимания, сути скажу, что в конце урока мы получим слайдер с такими функциями:

  • Переключение слайдов влево-вправо
  • Режим автоматической работы слайдера, кнопки старт-пауза
  • Неограниченное количество слайдов

Разметка слайдера

Разметка слайдера очень проста, нам понадобится:

  • общий контейнер (slider),
  • Три контейнера для навигации (две кнопки на предыдущий/следующий слайд (navy) и одна кнопка(auto) для кнопок старт/пауза),
  • контейнер для всех слайдов (slide-list),
  • обертка всех слайдов (slide-wrap).
<div class="slider">
  <div class="slide-list">
    <div class="slide-wrap">
	
	  ... тут будут слайды в контейнере slide-item
      <div class="slide-item">
        <img src="img/img-1.jpg" alt="" />
        <span class="slide-title">Первый слайд</span>
      </div>
		
    </div>
    <div class="clear"></div>
  </div>
  <div name="prev" class="navy prev-slide"></div>
  <div name="next" class="navy next-slide"></div>
  <div class="auto play"></div>
</div>

Стили слайдера

Для стилизации слайдера, добавим чучуть правил в файл стилей.

/* Задаем сброс обтекания */
.clear {
	margin-top: -1px;
	height: 1px;
	clear:both;
	zoom: 1;
}		
/* Slider */
.slider {
	/* Ширина контейнера */
	width: 900px;
	/* Внешние тступы сверху и снизу */
	margin: 50px auto;
	/* Внутренние отступы для ссылок navy */
	padding: 0 30px;
	/* Позиционирование */
	position: relative;
}
/* Двойной клик по кнопкам вперед/назад вызывает выделение всех элементов слайдера,
поэтому предотвращаем это */
.slider::-moz-selection { background: transparent; color: #fff; text-shadow: none; }
.slider::selection { background: transparent; color: #fff; text-shadow: none; }

.slide-list {
	position: relative;
	margin: 0;
	padding: 0;
	/* Скроем то что выходит за границы */
	overflow: hidden;
}
.slide-wrap {
	position: relative;
	left: 0px;
	top: 0;
	/* максимально возможная ширина обертки слайдера */
	width: 10000000px;
}
.slide-item {
	/* Ширина слайда */
	width: 280px;
	/* Внутренние отступы */
	padding: 10px;
	/* Обтекание */
	float: left;
}
.slide-title {
	/* Шрифт */
	font: bold 16px monospace;
	/* Указываем, что элемент блочный */
	display: block;
}

И еще не маловажные стили для кнопок навигации вперед/назад и старт/пауза

/* навигация вперед/назад */
.navy {
	/* абсолютное позиционирование */
	position: absolute;
	top: 0;
	z-index: 1;
	height: 100%;
	/* ширина элементов */
	width: 30px;
	cursor: pointer;
}
.prev-slide {
	left: 0;
	background: #dbdbdb url(bg/left-arrow.png) 11px 40% no-repeat;
}
.next-slide {
	right: 0;
	background: #dbdbdb url(bg/right-arrow.png) 13px 40% no-repeat;
}
.navy.disable {
	background: #dbdbdb;
}
/* навигация старт/пауза */
.auto {
	width: 7px;
	height: 11px;
	cursor: pointer;
	margin: 10px auto;
}
.play {
	background: url(bg/play.png) center no-repeat;
}
.pause {
	background: url(bg/pause.png) center no-repeat;
}

Запомните, что фон у кнопок указывается такой же как и общий фон, чтобы перекрыть отображение слайдов. Теперь очередь скрипта jQuery, которым и займемся.

Пишем скрипт

Не забудьте, что для начала нужно подключить библиотеку jQuery. А после напишем скрипт слайдера и инициализируем его. Для начала приведу полный листинг кода, а затем объясню, что тут происходит:

<script type="text/javascript">
jQuery(document).ready(function(){
 function htmSlider(){
  /* Зададим следующие параметры */
  /* обертка слайдера */
  var slideWrap = jQuery('.slide-wrap');
  /* кнопки вперед/назад и старт/пауза */
  var nextLink = jQuery('.next-slide');
  var prevLink = jQuery('.prev-slide');
  var playLink = jQuery('.auto');
  /* Проверка на анимацию */
  var is_animate = false;
  /* ширина слайда с отступами */
  var slideWidth = jQuery('.slide-item').outerWidth();
  /* смещение слайдера */
  var scrollSlider = slideWrap.position().left - slideWidth;
		
  /* Клик по ссылке на следующий слайд */
  nextLink.click(function(){
   if(!slideWrap.is(':animated')) {
    slideWrap.animate({left: scrollSlider}, 500, function(){
     slideWrap
      .find('.slide-item:first')
      .appendTo(slideWrap)
      .parent()
      .css({'left': 0});
    });
   }
  });

  /* Клик по ссылке на предыдующий слайд */
  prevLink.click(function(){
   if(!slideWrap.is(':animated')) {
    slideWrap
     .css({'left': scrollSlider})
     .find('.slide-item:last')
     .prependTo(slideWrap)
     .parent()
     .animate({left: 0}, 500);
   }
  });
		
  /* Функция автоматической прокрутки слайдера */
  function autoplay(){
   if(!is_animate){
    is_animate = true;
    slideWrap.animate({left: scrollSlider}, 500, function(){
     slideWrap
      .find('.slide-item:first')
      .appendTo(slideWrap)
      .parent()
      .css({'left': 0});
     is_animate = false;
    });
   }
  }
		
  /* Клики по ссылкам старт/пауза */
  playLink.click(function(){
   if(playLink.hasClass('play')){
    /* Изменяем клас у кнопки на клас паузы */
	playLink.removeClass('play').addClass('pause');
    /* Добавляем кнопкам вперед/назад клас который их скрывает */
    jQuery('.navy').addClass('disable');
    /* Инициализируем функцию autoplay() через переменную
       чтобы потом можно было ее отключить
	*/
    timer = setInterval(autoplay, 1000);
   } else {
    playLink.removeClass('pause').addClass('play');
	/* показываем кнопки вперед/назад */
    jQuery('.navy').removeClass('disable');
    /* Отключаем функцию autoplay() */
    clearInterval(timer);
   }
  });

 }
 
 /* иницилизируем функцию слайдера */
 htmSlider();
});
</script>

Пояснения:

Первым делом мы создаем необходимые перемнные, для упрощения работы с кодом:

  • обертка слайдера
  • ширина слайда
  • смещение обертки слайдера
  • кнопки навигации

Второе действие это описание кликов на кнопки вперед/назад

Сначала я просто анимировал перемещение по клике на кнопку nextLink: с помощью функции animate() мы анимируем перемещение обертки слайдера влево на значение scrollSlider. После того, как произошло это событие, первый слайд в списке слайдов, перемещаем в конец списка, а обертке списка слайдов задаем позицию слева 0. Но оказалось, что если по ней быстро кликнуть 10 раз, то произойдет 10 перемещений, и это реальный баг.

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

Событие анимации слайдера по клике на кнопку предыдущий слайд немного другое:

Первыми шагами мы задаем позицию обертки слайдов слева scrollSlider и перемещаем последний слайд в обертке в самое начало списка, но заметьте уже без анимации; вторым шагом мы анимируем изменение позиции обертки слайдера на значение 0.

Вот так все просто)

Функция автопрокрутки слайдера аналогична анимации, которая происходит по клику на кнопку следующий слайд, ничего особенного, я ее вынес для того, чтобы корректно использовать фукнции jQuery — setInterval и clearInterval — они реально крутые)

По клике на кнопку автоматической работы слайдера, происходят следующие события:

  1. Если у кнопки установлен клас play, то меняем этот класс на pause, скрываем кнопки вперед/назад [чтобы они не нарушали работу слайдера], и запускаем с помощью переменной timer автопрокрутку.
  2. Если у кнопки установлен класс pause, то меняем этот класс на start, показываем кнопки вперед/назад и прекращаем работу переменной timer, которая запускает автопрокрутку.

Последним шагом инициальзируем функцию слайдера htmSlider();

Два и более слайдеров на странице

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

jQuery(document).ready(function(){
	
//// ---> Проверка на существование элемента на странице
jQuery.fn.exists = function() {
   return jQuery(this).length;
}

//// ---> Слайдер
$(function(){
  if($('.slider').exists()) {

    $('.slider').each(function(){

      var slider = $(this);

      var slideWrap = slider.find('.slide-wrap'),
          nextLink = slider.find('.next-slide'),
          prevLink = slider.find('.prev-slide'),
          slideWidth = slider.find('.slide-item').outerWidth(),
          scrollSlider = slideWrap.position().left - slideWidth;

      /* Клик по ссылке на следующий слайд */
      nextLink.click(function(){
        if(!slideWrap.is(':animated')) {
          slideWrap.animate({left: scrollSlider}, 500, function(){
            slideWrap
              .find('.slide-item:first')
              .appendTo(slideWrap)
              .parent()
              .css({'left': 0});
            });
          }
       });

      /* Клик по ссылке на предыдующий слайд */
      prevLink.click(function(){
      if(!slideWrap.is(':animated')) {
        slideWrap
          .css({'left': scrollSlider})
          .find('.slide-item:last')
          .prependTo(slideWrap)
          .parent()
          .animate({left: 0}, 500);
        }
      });

    });

  }

});

});

Разметка второго слайдера отличается от первого только то что у контейнера .slider добавляем еще один класс, который позволит нам стилизировать второй (третий, н-ый) слайдер так как нам нужно:

<div class="slider slider2">
  ...
</div>

Оформим некоторые элементы слайдера по другому (уменьшим ширину слайдера, слайда, установим другой цвет и шрифт подписи слайда):

.slider.slider2 {
	width: 400px;
}
.slider2 .slide-item {
	width: 180px;
}
.slider2 .slide-title {
	font: bold 12px Arial;
	color: #ed0000;
}
.slider2 .navy {
	padding-top: 30px;
}
.slider2 .slide-item img {
	display: block;
	width: 100%;
}

Заключение

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

Добавить комментарий:

Комментарии
  1. Семен:

    Очень познавательно , успехов в дальнейшем!

  2. JAH:

    Владимир, все Вы правильно поняли.

      /* Функция автоматической прокрутки слайдера */
      function autoplay(){
       if(!is_animate){
        is_animate = true;
    
    
        /* Смещаем контейнер со слайдами влево на параметр scrollSlider */
        slideWrap.animate({left: scrollSlider}, 500, function(){
    
        /* callback функции animate */
         slideWrap
          .find('.slide-item:first') /* Находим первый слайд в контейнере */
          .appendTo(slideWrap) /* и добавляем его в конец этого же контейнера */
          .parent() /* обращаемся к родителю перемещенного слайда.. тоесть к этому же контейнеру */
          .css({'left': 0}); /* и указываем ему что отступ слева стал 0 .. тоесть обнулился */
    
    
         is_animate = false;
        });
       }
      }
    
  3. Владимир:

    Спасибо. А не могли бы вы объяснить что именно делает метод .parent() в вашем скрипте, я почитал в документации, что он возвращает родителя, но мне кажется что я что-то не понял.

  4. Довольно маленький, но богатый по функционалу jquery плагин, который позволяет разместить на странице слайдер – карусель, обладающий небольшим ядром и не потребляющий множества ресурсов сайта. Плагин может быть использован для отображения вертикальных и горизонтальных слайдеров, с анимацией и созданием наборов изображений из галереи.

  5. Спасибо автору за материал!

  6. Pacman:

    Здравствуйте, подскажите пожалуйста как убрать вращение по кругу?

  7. В круговом режиме слайдер выглядит довольно интересно. Отлично реализована поддержка метода drag and drop и система автоматической прокрутки слайдов.

  8. JAH:

    Ivan, используйте события mouseover и mouseout чтобы остановить и запустить автопрокрутку слайдера (тоесть удаляете и создаете таймер)

  9. ivan:

    Здравствуйте
    при наведении на картинку — нужно сделать паузу, при out — продолжить перелистывание…
    не пойму как реализовать
    автопрокрутку и вперед назад сделал, а вот как при наведении паузу ставить…

    спасибо

  10. JAH:

    Ирина, спасибо

  11. Ирина:

    В Вашем коде, где Вы исправляли баг с прокруткой при переключении вкладок и сворачиванию окна, потерялась одна закрывающая скобка, из-за которой не хотел работать скрипт.
    jQuery(document).ready(function(){
    function htmSlider(){
    var slideWrap = jQuery(‘.slide-wrap’);
    var slideWidth = jQuery(‘.slide-item’).outerWidth();
    var scrollSlider = slideWrap.position().left — slideWidth;

    var is_animate = false;

    timer = setInterval(function(){
    if(!is_animate){
    is_animate = true;
    slideWrap.animate({left: scrollSlider}, 500, function(){
    slideWrap
    .find(‘.slide-item:first’)
    .appendTo(slideWrap)
    .parent()
    .css({‘left’: 0});
    is_animate = false;
    });
    }
    }, 1000);
    }
    htmSlider();
    });

  12. Я вот себе поставил все как по уроку, и не каких проблем, спасибо за урок, очень полезный.

  13. Сергей:

    Здравствуйте, подскажите, как реализовать несколько слайдеров на одной странице, прочитал все комментарии, ответа на вопрос не нашел, один из комментировавших привел пример скрипта и решения с префиксами, но HTML разметка не видна в комментарии, так что ничего не понятно, сайт на локальном сервере, так что ссылки дать не могу, I need help!

  14. Привет. Ты может по шаговую инструкцию описать всего процесса. Много непонятного. Я хочу на свой сайт сделать слайдер, но куда какой код вставлять представление не имею.

  15. xDuremar:

    Уже разобрался с шириной.

  16. xDuremar:

    Здравствуйте. Подскажите, пожалуйста, как в таком слайдере можно задать отступ от кнопок навигации к прокручиваемым картинкам? Сколько я ни пытался уменьшить ширину контейнера, где крутятся картинки, но они то проходят под кнопками навигации, то строятся в несколько рядов, если задана меньшая ширина.

  17. JAH:

    Александр, слайдов должно быть больше 3(4)

  18. Александр:

    Добрый день! Не пойму, почему не работает автопрокрутка!
    Вот тут по умолчанию надо что-то менять?
    /* Функция автоматической прокрутки слайдера */
    function autoplay(){
    if(!is_animate){
    is_animate = true;
    slideWrap.animate({left: scrollSlider}, 500, function(){
    slideWrap
    .find(‘.slide-item-rot:first’)
    .appendTo(slideWrap)
    .parent()
    .css({‘left’: 0});
    is_animate = false;
    });
    }
    }

    Спасибо заранее!

  19. JAH:

    Ольга, можно вставлять какртинки как фон

    <div class="slide" style="background-image: url('assets/photo/slide1.jpg');"></div>
    
    .slide {
    	backgrouund-repeat: no-repeat;
    	background-position: center;
    	background-size: cover;
    }
    

    также можно юзать скрипты которые ресайзят картинки

  20. Ольга:

    Спасибо огромное простой слайдер и очень подошел, поскольку нужен был слайдер картинок для галереи fancybox. Все заработало отлично, Есть проблема с масштабированием картинок в слайдере, но это уже как говорится из другой оперы. Кстати, может кто посоветует решение как сделать, чтобы картинки разные по размеру в слайдер можно было добавлять , и они могли масштабироваться и занимать всю область просмотра как по ширине так и по высоте. Спасибо заранее за советы.

  21. Albert:

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

  22. JAH:

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

    Как вариант можно пооборачивать нужное к-во слайдов div’ами, вот так

    <div class="slide-item">
    	
    	<div class="sub-slide-item">
    		<img src="img/img-1.jpg" alt="" />
    		<span class="slide-title">Первый слайд</span>
    	</div>
    	
    	<div class="sub-slide-item">
    		<img src="img/img-1.jpg" alt="" />
    		<span class="slide-title">Первый слайд</span>
    	</div>
    	
    	<div class="sub-slide-item">
    		<img src="img/img-1.jpg" alt="" />
    		<span class="slide-title">Первый слайд</span>
    	</div>
    
    </div>
    
    <div class="slide-item">
    	
    	<div class="sub-slide-item">
    		<img src="img/img-1.jpg" alt="" />
    		<span class="slide-title">Первый слайд</span>
    	</div>
    	
    	<div class="sub-slide-item">
    		<img src="img/img-1.jpg" alt="" />
    		<span class="slide-title">Первый слайд</span>
    	</div>
    	
    	<div class="sub-slide-item">
    		<img src="img/img-1.jpg" alt="" />
    		<span class="slide-title">Первый слайд</span>
    	</div>
    
    </div>
    

    задаете slide-item ширину всего блока, а sub-slide-item нужную ширину, причем можно поиграть с оборачиванием 3-4-5-6-7-8 слайдов при этом будете листать разное к-во картинок

  23. Подскажите как сделать, что бы перелестывало сразу к примеру 8 картинок (слайдов), сеночас оно перелестывает по одной, перечитал все коменты, нашел похожий вопрос, но не нашел ответа, хотя у человека на сайте реализовано переключение сразу 4 или 5 слайдов. За ранее спасибо.

  24. Алекс:

    Прошу прощения, проблема не в скрипте, заглавная буква в расширении изображений ведет к тому, что оно не отображается.
    было
    img/1.jpg
    img/2.jpg
    img/3.jpg
    img/4.JPG
    img/5.JPG

  25. Алекс:

    В скрипте нашел баг! На Ipad при просмотре загружаются только те картинки, которые изначально появились на странице, то есть если их больше, чем отображается (в данном скрипте по умолчанию у меня 3), то остальные останутся просто пустой рамкой без изображения

  26. Здравствуйте, подскажите что нужно изменить или что нужно прописать в js, что бы слайдер работал как на этом сайте — kinokrad.net, мой сайт вот hd720.biz, сверху слайдер сделан с помощью вашего урока, за что очень благодарен. Извините за ссылки, может если что их удалить.

  27. crunchy:

    добрый день! скажите, пожалуйста как использовать скрипт для нескольких слайдеров на странице (только начинаю изучать js и jquery)?

  28. Archgear:

    Здравствуйте! Никак не могу понять — почему с перемещением
    slideWrap
    .find(‘.slide-item:first’)
    .appendTo(slideWrap)
    .parent()
    .css({‘left’: 0});
    все работает нормально, а без него — только один раз срабатывает. Заранее извиняюсь, если уже был такой вопрос.

  29. JAH:

    Николай, вот здесь уже писал про это)

  30. Николай:

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

  31. Блондинка:

    Который день пытаюсь найти ошибку, но все безрезультатно. Скрипт взят отсюда, разметка (селекторы) и css адаптированы под нужды макета. Подскажите, пжлст, люди добрые, в чем может причина того, что при нажатии на кнопки ничего не происходит? P.S. автопрокрутка не нужна, хватит двух кнопок вперед и назад.
    Ссылка на мои мучения: https://www.dropbox.com/sh/px34u6sgtgzly8r/AAAJIHDaBteE1-MJC9VwBLEca?dl=0

  32. Александр:

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

  33. нихнухнах:

    Первый слайд


    вот решил обвернуть все в

  34. нихнухнах:

    Здравствуйте!

    Первый слайд


    после первого прогона слайда «Первый слайд» становится не кликабельным, можно это как то исправить

  35. JAH:

    Valery, суть статьи показать как сделать слайдер самому а не использовать готовое решение, тем более что часто нужен кастомный слайдер

  36. Анна:

    У меня их 23 😀

  37. JAH:

    Анна, если у Вас всего лишь 3 слайда, то нужно добавить 4-ый или больше слайдов, тогда будет все хорошо

  38. Анна:

    Вот у вас в демо при прокрутке вперед, если все слайды заканчиваются, он их листает заново, а у меня получается, когда последний слайд после него идет пустое место, и только после n-го нажатия вперед появляется первый слайд.

  39. JAH:

    Слава
    попробуй так:

    
    if (slider.hasClass('slider2') && slider.find('.slide_item').length < 5) {
      nextLink.hide();
      prevLink.hide();
    }
    
  40. Слава:

    Ваше условие срабатывает. Но только проблема в том что на странице используется 3-4 слайдера. и естественно ето условие срабатывает на все ети слайдеры.
    Непойму как идентифицировать определённый слайдер, пробывал записи такого рода: не выходит…
    if(slider.find(‘slider2 .slide-item’).length < 5)
    {
    nextLink.hide();
    prevLink.hide();
    }

  41. JAH:

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

    if(slider.find('.slide-item').length < M){
        nextLink.hide();
        prevLink.hide();
    }

    где М — нужное число листаемых слайдов

  42. Слава:

    Доброго времени суток. Благодарю вас за скрипт, работает вроде всё отлично, без глюков и вроде как кросБраузерно.

    Есть маленькая просьба к вам 🙂
    Как в скрипт для множества слайдеров добавить проверку на количество листаемых слайдов. и если ето количество меньше нужного, добавить кнопкам прокрутки клас display:none

  43. Дмитрий:

    Ура! получилось, как хотел. Хотя я в Вэб дизайне полный ноль. http://www.pxpress.ru/

  44. JAH:

    Альф, попробуйте увеличить к-во слайдов на 1. или оба слайдера дергаются?

  45. Альф:

    Если сделать так как вы советуете (в моем случае это два видимых слайда), то при прокрутке вправо — дергается анимация. Как быть?
    Спасибо за вашу работу 🙂
    .slide-item {
    /* Ширина слайда */
    width: 880px;
    /* Внутренние отступы */
    padding: 10px;
    /* Обтекание */
    float: left;
    }
    .navy, .auto {display:none}

  46. Илья:

    Здравствуйте! У меня своя галлерея, но нужно, миниатюры распологаются сверху вниз , то есть по ширине, например, в одной строке по 7 штук вниз , а мне нужно, чтобы как у вас все было горизонтально с полосой прокрутки. Помогите

  47. Иван:

    Убрал лишние вот код

    jQuery(document).ready(function(){
     function htmSlider(){
      /* Зададим следующие параметры */
      /* обертка слайдера */
      var slideWrap = jQuery('.slide-wrap');
      /* кнопки вперед/назад и старт/пауза */
      var nextLink = jQuery('.next-slide');
      var prevLink = jQuery('.prev-slide');
      var playLink = jQuery('.auto');
      /* Проверка на анимацию */
      var is_animate = false;
      /* ширина слайда с отступами */
      var slideWidth = jQuery('.slide-item').outerWidth();
      /* смещение слайдера */
      var scrollSlider = slideWrap.position().left - slideWidth;
     
      /* Клик по ссылке на следующий слайд */
      nextLink.click(function(){
       if(!slideWrap.is(':animated')) {
        slideWrap.animate({left: scrollSlider}, 500, function(){
         slideWrap
          .find('.slide-item:first')
          .appendTo(slideWrap)
          .parent()
          .css({'left': 0});
        });
       }
      });
     
      /* Клик по ссылке на предыдующий слайд */
      prevLink.click(function(){
       if(!slideWrap.is(':animated')) {
        slideWrap
         .css({'left': scrollSlider})
         .find('.slide-item:last')
         .prependTo(slideWrap)
         .parent()
         .animate({left: 0}, 500);
       }
      });
     
      timer = setInterval(function(){
       slideWrap.animate({left: scrollSlider}, 500, function(){
        slideWrap
         .find('.slide-item:first')
         .appendTo(slideWrap)
         .parent()
         .css({'left': 0});
        });
      }, 3000);
     }
     htmSlider();
    });
    
  48. Иван:

    Сделал

    jQuery(document).ready(function(){
     function htmSlider(){
      /* Зададим следующие параметры */
      /* обертка слайдера */
      var slideWrap = jQuery('.slide-wrap');
      /* кнопки вперед/назад и старт/пауза */
      var nextLink = jQuery('.next-slide');
      var prevLink = jQuery('.prev-slide');
      var playLink = jQuery('.auto');
      /* Проверка на анимацию */
      var is_animate = false;
      /* ширина слайда с отступами */
      var slideWidth = jQuery('.slide-item').outerWidth();
      /* смещение слайдера */
      var scrollSlider = slideWrap.position().left - slideWidth;
     
      /* Клик по ссылке на следующий слайд */
      nextLink.click(function(){
       if(!slideWrap.is(':animated')) {
        slideWrap.animate({left: scrollSlider}, 500, function(){
         slideWrap
          .find('.slide-item:first')
          .appendTo(slideWrap)
          .parent()
          .css({'left': 0});
        });
       }
      });
     
      /* Клик по ссылке на предыдующий слайд */
      prevLink.click(function(){
       if(!slideWrap.is(':animated')) {
        slideWrap
         .css({'left': scrollSlider})
         .find('.slide-item:last')
         .prependTo(slideWrap)
         .parent()
         .animate({left: 0}, 500);
       }
      });
     
      /* Функция автоматической прокрутки слайдера */
      function autoplay(){
       if(!is_animate){
        is_animate = true;
        slideWrap.animate({left: scrollSlider}, 500, function(){
         slideWrap
          .find('.slide-item:first')
          .appendTo(slideWrap)
          .parent()
          .css({'left': 0});
         is_animate = false;
        });
       }
      }
     
      timer = setInterval(function(){
       slideWrap.animate({left: scrollSlider}, 500, function(){
        slideWrap
         .find('.slide-item:first')
         .appendTo(slideWrap)
         .parent()
         .css({'left': 0});
        });
      }, 3000);
     }
     htmSlider();
    });
    
  49. Иван:

    Сорри, код нашел для автопрокрутки, но кнопки при этом не работают, беда.

  50. Иван:

    Так всё таки возможно запустить автопрокрутку при загрузки страницы или нет?

  51. JAH:

    Cardus, Вам нужно переопределить классы слайдера и все будет работать)

  52. Cardus:

    Самый простой вопрос остается без ответа: при вставке слайдера сбиваются старые стили страницы, в т.ч. Spry-выпадающее меню разбивается на простой список линков. Какое лекарство? Заранее благодарен!

  53. Владимир:

    Не корректно работает если не задана ширина слайда. у меня картинки например разной ширины…подскажите как поправить

  54. Верстальщик:

    автору спасибо. запарился искать простой, но функциональную карусель)

  55. Сергей:

    Уважаемый JAH! Подскажите пожалуйста как в ваш слайдер добавить функцию прокрутки изображений колесом мыши. Заранее очень признателен.

  56. Александр:

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

  57. JAH:

    Alina, это можно поправить чуток изменив стили:

    .slider {
    	width: 900px;
    	margin: 50px auto;
    	padding: 0 30px;
    	position: relative;
    }
    .slide-list {
    	position: relative;
    	margin: 0;
    	padding: 0;
    	overflow: hidden;
    }

    после такого фон у стрелочек можно убрать

  58. Alina:

    Мне очень нравится этот слайдер, но как я поняла у стрелочек вправо и влево есть фон и если его убрать то под ними проходит сама картинка из слайда, как это исправить? потому что у меня на странице другой фон-картинка(

  59. JAH:

    DoK, смотрите внимательно через консоль Хрома или мозилы подтягиваются ли стили к Вашему слайдеру

  60. DoK:

    Сидел разбирал, вроде все понятно, но в итоге картинки на страничке столбцом, а не в один ряд, скопировал готовое и в итоге тоже самое, куда копать?)

  61. Andrew:

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

  62. JAH:

    Andrew, попробуем)

  63. Andrew:

    Сам веб-разработчик, вначале взял слайдера с этого сайта ибо добротно сделан, но как и в 90% заказчик сам не знает чего хочет, пришлось переделывать слайдер под эффекты Fade in Fade out, библиотека как и для этого слайдера jquery-1.8.2.min.js. Его легко изменить под div’ы или таблицы как захотите, так же заточить под любую CMS.

    верстка и скрипт:

    *{margin:0; padding:0;}
    #page-wrap {
    margin: 0 auto;
    }
    body{background:#fff;}
    .main {max-width: 600px; height:400px; margin: 0 auto;background:#000;padding:10px;}

    #slider
    {
    position: relative;
    width:100%;
    height:100%;
    }

    img
    {
    position: absolute;
    max-width: 100%;
    height: auto !important;
    display: none;
    }

    (function slider(){
    var slides = $(«#slider > img»);
    var currentIndex = -1;
    var slideCount = slides.length;
    var timePerSlide = 5000;
    var fadeDuration = 1000;

    var nextSlide = function(){
    var nextIndex = currentIndex + 1;
    if (nextIndex == slideCount)
    nextIndex = 0;

    var me = $(slides[currentIndex]);
    var nxt = $(slides[nextIndex]);

    var w = nxt.width();
    var h = nxt.height();

    me.fadeOut(fadeDuration);
    nxt.fadeIn(fadeDuration);

    nxt.css({
    «left»:»50%»,
    «margin-left»:w/2 * -1,
    «top»:»50%»,
    «margin-top»: h/2 * -1
    });

    currentIndex = nextIndex;
    setTimeout(nextSlide, timePerSlide);
    };

    setTimeout(nextSlide, 0);
    })();

    Легкий в понимании. Там есть строчки nxt.css можно удалить весь блок функции — это банально центрирование картинки

  64. JAH:

    Andrew, предусмотрена только горизонтальная прокрутка

  65. Andrew:

    А как сменить стиль слайдера? Fade in; Fade Out;

  66. Иван:

    Пожалуйста дайте развернутый ответ, как заставить работать 2 слайдера на 1 странице.

  67. Но фишка в том, JAH, что скрипт «из коробки» работает только когда на странцие 1 слайдер. Мне же необходимо n-ое количество слайдеров на странице. Сделал так: ко всем элементам добавил id с именем класса + префик. Например:

    А можно подробнее подсказать как сделать.
    А то скрипт действительно замечательный и хотелось бы несколько слайдеров расположить на одной странице?

  68. Alex:

    Поддерживаю про немедленное включение автопоказа при загрузке страницы. Очень нужно.

  69. Дмитрий:

    JAH, благодарю Вас за слайдер, добавил css эфектов выглидит изумительно. Хотелось бы исправить только одну вещь, что-бы вначале включался автопоказ, а потом его можно было остановить и при этом ссылки оставались полностью функционировать, стрелки вправо/влево. Если у вас будет свободное время выложите пожалуйста с такими исправления script.

  70. Он ведь автоматический? Или я путаю? У меня есть макет таблицы http://testovik01.rusff.ru/. там посередине будет слайдер. Хотелось бы, чтобы он был автоматический, сам листал информацию, но при этом сохранились бы стрелочки, на случай если понадобится вернуться на слайд назад. Такое возможно? Я уже везде ищу, но никак не могу найти, и вообще в этом не особо разбираюсь.) Была бы рада если бы вы помогли)

  71. JAH:

    Анастасия, кончено можно, нужно только определиться что Вы хотите в нем крутить)

  72. Здравствуйте! Скажите пожалуйста, а как можно настроить это слайдер для форума mybb.ru? Очень хотелось бы этот слайдер, но, увы я чайник и не понимаю что и куда вставлять.

  73. Нашел, то что искал, спасибо за слайдер.

  74. JAH:

    Дмитрий, как раз доделываю плагин слайдера, который будет иметь полезные настройки, в скором времени выложу его. Можете подписаться на rss (внизу страницы) чтобі получить письмо на почту когда я его опубликую

  75. JAH, поставил на http://ofavorit.ru/ , однако хотелось бы проматывать не по 1 картинке, а по 5. Как сделать анимацию прокрутки на 5 понятно, а вот как сделать что бы они действительно прокручивались- не очень. Подскажите, пожалуйста.

  76. Nadia:

    Спасибо за скрипт, отлично работает. Объясните, пожалуйста, как больше картинок подключить:)

  77. JAH:

    Олег, смотрится отлично)

  78. Спасибо JAH. Поставил, на http://vashakrovlja.ru/metallocherepica всё работает.

  79. JAH:

    Дима, возможно версия jquery старая. В версии 1.8.2 которая в примере глючит тока функция animate() при переключении вкладок, а в версии до 1.6.2 глючит функция setInterval() при переключении вкладок или сворачивании окон браузера

  80. Jah, у меня почему то с этими поправками не работает.Убираю из кода var is_animate = false;
    if(!is_animate){
    is_animate = true;
    Начинает работать по старому:(

  81. JAH:

    Так ребята! Пофиксил баг автопрокрутки при переключении вкладок и сворачивании окон. Дело оказалось в том, что при переключении вкладок и сворачивании браузера, бразузер продолжает четко отсчитывать заданное значение SetInterval(), ну а анимацию прекращает отображать, а вот и решение:

    jQuery(document).ready(function(){
     function htmSlider(){
      var slideWrap = jQuery('.slide-wrap');
      var slideWidth = jQuery('.slide-item').outerWidth();
      var scrollSlider = slideWrap.position().left - slideWidth;
    
      var is_animate = false;
     
      timer = setInterval(function(){
       if(!is_animate){
       is_animate = true;
       slideWrap.animate({left: scrollSlider}, 500, function(){
        slideWrap
         .find('.slide-item:first')
         .appendTo(slideWrap)
         .parent()
         .css({'left': 0});
        is_animate = false;
        });
      }, 1000);
     }
     htmSlider();
    });

    В общем решение зависит от переменной is_animate, если окно браузера теряет фокус мы запускаем анимацию (автопрокрутку).

    По поводу нескольких слайдеров на странице: сейчас я работаю над плагином jquery слайдера, которому можно будет задавать параметры и как плюс можно будет скачать нужный Вам тип слайдера, в скором времени надеюсь закончу и выложу

  82. Дмитрий:

    Огромное спасибо Вам за слайдер, очень пригодился!
    Перебрал подобных слайдеров около 15шт, этот самый простой и легкий!

    Подскажите, пожалуйста, как сделать что бы при прокрутке смещение происходило не на 1 слайд, а на несколько, скажем, на 5?

  83. Николай:

    Jah, спасибо за слайдер!
    Меня интересует вопрос Натали, как сделать автопрокрутку слайдов по умолчанию?

  84. Zzzz:

    Простой и удобный!
    Зачет.
    Я вот ломаю голову чтобы слайдер еще проще адаптировался в код, например:
    div.slidebox
    ul
    li img /li
    li img /li
    li img /li
    ul
    /div

    И вот такая структура чтобы интегрировалась неограниченное количество раз. Тобиш чтобы можно было много раз использовать скрипт.

    Столкнулся с проблемой — несколько слайдеров не хотят нормально работать.

    Влево по одно прокручиваются. А вот в правую сторону только синхронно крутятся.
    Может кто сталкивался с подобной задачей? Платины не предлагать. Только руками!

  85. С тем что в архиве представлен у меня тоже самое происходит в авторежиме.

  86. В хроме если свернуть страницу и через 2 3 минуты зайди , слайдер там очень быстро прокручивается.Скрипт использовал тот которы из начала ветки.

    jQuery(document).ready(function(){
    function htmSlider(){
    var slideWrap = jQuery(‘.slide-wrap’);
    var slideWidth = jQuery(‘.slide-item’).outerWidth();
    var scrollSlider = slideWrap.position().left — slideWidth;

    timer = setInterval(function(){
    slideWrap.animate({left: scrollSlider}, 500, function(){
    slideWrap
    .find(‘.slide-item:first’)
    .appendTo(slideWrap)
    .parent()
    .css({‘left’: 0});
    });
    }, 1000);
    }
    htmSlider();
    });

  87. JAH:

    Дима, в каком браузере?

  88. Вопрос автору.

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

    Спасибо.

  89. Натали:

    А как сделать, чтобы вначале была автопрокрутка? Заранее спасибо.

  90. антон:

    вроде все легко.а вообше не пойму что делать надо
    залил папки и 2 файла из архива на сайт.а дальше что? куда все что тут есть вставлять.и что удалить.ибо на русском там написанно
    кто может помочь в установке на сайт

  91. Два слайдера на одной странице не пашут

  92. Ann:

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

  93. Паша:

    Всем привет. Добавил слайдер себе на сайт, но он чтото не хочет нормально работать. Когда нажимаю на кнопку предыдущего слайда то все нормально, прокрутка идет нормально, а когда нажимаю на кнопку следующего слайда то прокручивается только один раз, а далее идет без плавного эффекта слайда. Помогите пожалуйста, в чем дело непойму, хотя ваш пример работает.

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

  95. JAH:

    Игорь, спасибо за дельный совет, обязательно буду использовать

  96. Для того, чтобы не париться с добавлением и удалением атрибута name для каждой кнопки, можно обработчик клика на кнопку завернуть в условие:
    if( !slideWrap.is(‘:animated’) )
    {}
    Тогда во время анимации кликнуть по кнопке еще раз не удасться и багов с прокруткой не будет.

  97. JAH:

    Ann, Nikita,
    напомню, что это один из примеров слайдера, к сожалению имею мало свободного времени, но в планах написать еще пару-тройку различных примеров реализации слайдеров

  98. Ann:

    Да меня тоже интересует последний момент. Как сделать концовки, чтобы на первом слайде не было кнопки влево, а на последнем в право?

  99. Nikita:

    Здравствуйте, подскажите пожалуйста как убрать вращение по кругу?

  100. ДенИС:

    bulba_man, это можно сделать с помощью marquee 🙂

  101. TrojanWar:

    JAH, меня смущает этот момент —

    <!-- где 32 - уникальный для каждого слайдера на странице префикс-->

    Такое ощущение, что там должен был быть код, а не только комментарий.
    Как бы то ни было, можете объяснить как несколько слайдеров расположить на одной странице? =)

  102. JAH:

    TrojanWar, смотри его комментарий он(Бублик) написал ответ

  103. TrojanWar:

    Привет всем!

    Какой там пример был у Бублика с множеством слайдеров? Очень нужно.

    Спасибо.

  104. bulba_man:

    ооо! очень хороший слайдер! уже несколько недель искал это. этот единственный, который удалось подружить с мутулсом. но скрипт немного не тот, который мне нужен:(
    немогли бы вы мне помочь? нужно как на странице http://www.gain-dragon.ru/ перед футером «наши достижения». т.е. автостарт и остановка при наведении мыши. спасибо за внимание..

  105. JAH:

    Кирилл, нужно добавить проверку на существование слайдера на страницах, вот так

    /*	Функция проверки на существование элемента */
    jQuery.fn.exists = function() {
    	return jQuery(this).length;
    }
    
    if(jQuery(' /* тут айди или клас слайдера */ ').exists()) {
    	
    	а тут сам скрипт слайдера
    	
    }
  106. JAH, есть небольшой вопрос… когда я нахожусь на странице со слайдером — все ок, когда же перехожу на другую, где слайдера нет, то получаю такое сообщение:
    » Uncaught TypeError: Cannot read property ‘left’ of undefined »
    и ссылку на 15 строчку файла slider.js
    В js вообще не силен, подскажите, пожалуйста, то это и как это лечить?

  107. Сергей:

    Спасибо!

  108. JAH:

    Сергей, Чтобы был пейджер скрипт, нужно чуток поменять) это будет в следующей статье про слайдеры, которая в разработке (будет что-то объединенное: этот слайдер и предыдущий)

  109. Сергей:

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

  110. ДенИС:

    Виталик, так на том сайте что Вы давали как образец, слайдер тоже выводится в виде одной картинки. Просто там тот скрипт был скопирован и размещен 6-ть раз.
    Так вот сделайте и Вы так, разместите этот слайдер 5 или 6-ть раз и будет Вам 5-6 слайдеров))

  111. JAH, да! спасибо) Вы правы) теперь все работает как надо!!! Еще раз благодарю за скрипт)

  112. Виталик:

    ДенИС Это слайдер немного не подходит так как в нем реализован вывод только одной картинки — а мне нужно их несколько в ряд, допустим 3 или 4…

  113. JAH:

    Кирилл, попробуйте выводить в своем слайдер не 4 а 5 постов)) должно помочь

  114. ДенИС:

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

  115. Скрипт отличный! Огромное спасибо! Давно искал подобный! У меня единственный вопрос, при нажатии на стрелки (вперед/назад) у меня изображение не плавно выплывает, а сначала все плавно сдвигается потом на пустом месте появляется картинка. Но, что странно заголовки (под картинками) именно выплывают а не появляются…

    Подскажите, пожалуйста, куда рыть? в чем может быть проблема?

  116. Виталик:

    немного не понял — а где конкретно и как надо оборачивать изображение ссылкой?
    и насчет скрипта — его надо модифицировать ? или что Вы имели ввиду ?

  117. JAH:

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

  118. JAH:

    Иван, в каком ие?

  119. Иван:

    в IE к сожалению не работает… Подскажите как решить эту проблему

  120. ДенИС:

    я в js не спец. но судя по всему надо к каждой строке картинок добавить примерно такое

    i.onclick=location.href=Ваш адресс'
  121. Виталик:

    Уже есть вопрос — скажите пожалуйста, а можно ли как то рисунки сделать ссылками?

  122. Виталик:

    ок, огромное спасибо Вам. скачаю буду разбираться, думаю вопросы по-любому будут )

  123. ДенИС:

    Виталик, вот Вам сделал «Быстрый старт», такого же слайдера как Вы хотите
    скачать. Откроете index.html через любой текстовый редактор и увидите ка кон устроен, если не разберетесь пишите на почту помогу)
    p.s. так чисто для информации, на том сайте что Вы показали используется 6-ть слайдеров.

  124. Виталик:

    скажите пожалуйста, а как реализовать с помощью Вашего слайда вивод картинок не в випливающей строке, а чтобі они стояли на месте но сами картинки менялись каждие раз случайним методом. Надеюсь ви поняли )
    пример смотрите внизу на странице http://www.rg-gr.ru/

  125. ДенИС:

    В первую очередь Спасибо Большое за слайдер!)
    Мне вот понадобилось вкладки (табы), вместо изображений, вложить в слайдер.
    Идея как бы получилась, вот пример Смотреть,
    но потом задумка потребовала, вложить это слияние скриптов (табов и Вашего слайдера) один в один, то есть чтобы один такой блок был внутри другого и тут у меня почему то не получается решить их конфликт, пробовал вариант который предлагался выше с использование prefix, но что то не получается.
    В общем был бы благодарен за помощь вот этот онлайн пример, который не работает

  126. Виталик:

    Спасибо за хороший скрипт и разьяснение. Успехов автору

  127. ДенИС:

    Margo, попробуйте так

    .slide-item {
    	/* Ширина слайда */
    	width: auto;

    в общем где Вас не устраивает размер укажите свой или auto.
    Экспериментируйте!)

  128. Margo:

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

  129. Ребят всем привет. Огромное спасибо за слайдер. Обрыл n количество источников этот реально заебательский=). Понял, что нифига не смыслю в Java , как сделать автоматическое включение слайдера?)

  130. JAH:

    Бублик, спасибо за полезное дополнение.
    Мне пригодится точно 😉

  131. Ах да, автопроигрывание мне не нужно, поэтому его убрал из когда.

  132. JAH, большое спасибо, классный скрипт, а главное простой и понятный.
    Сделал на его основе простую фото галерею.

    Но фишка в том, JAH, что скрипт «из коробки» работает только когда на странцие 1 слайдер. Мне же необходимо n-ое количество слайдеров на странице. Сделал так: ко всем элементам добавил id с именем класса + префик. Например:

    <!-- где 32 - уникальный для каждого слайдера на странице префикс-->

    Что бы классы не сбивались.

    Скрипт модифицировал так

     function htmSlider(prefix){
      /* Зададим следующие параметры */
      /* обертка слайдера */
      var slideWrap = $('#slide-wrap-'+prefix);
      /* кнопки вперед/назад и старт/пауза */
      var nextLink = $('#next-slide-'+prefix);
      var prevLink = $('#prev-slide-'+prefix);
      /* ширина слайда с отступами */
      var slideWidth = $('#slide-item-'+prefix).outerWidth();
      /* смещение слайдера */
      var scrollSlider = slideWrap.position().left - slideWidth;
     
      /* Клик по ссылке на следующий слайд */
      nextLink.click(function(){
       if( nextLink.attr('name') == 'next' ) {
        nextLink.removeAttr('name');
        slideWrap.animate({left: scrollSlider}, 500, function(){
         slideWrap
          .find('#slide-item-'+prefix+':first')
          .appendTo(slideWrap)
          .parent()
          .css({'left': 0});
        });
        setTimeout(function(){ nextLink.attr('name','next') }, 500);
       }
      });
     
      /* Клик по ссылке на предыдующий слайд */
      prevLink.click(function(){
       if( prevLink.attr('name') == 'prev' ) {
     
        prevLink.removeAttr('name');
     
        slideWrap
         .css({'left': scrollSlider})
         .find('#slide-item-'+prefix+':last')
         .prependTo(slideWrap)
         .parent()
         .animate({left: 0}, 500);
     
        setTimeout(function(){ prevLink.attr('name','prev') }, 500);
       }
      });
     }

    Из HTML вызываю функцию по onmousemove

    <!-- Где 32 - уникальный параметр для каждого слайдера-->

    Вот и все, думаю кому-нибудь может стать полезным.

  133. слидер:

    ну хорошо попробуем. Спасибо за ответ

  134. JAH:

    Слидер, ты подключил очень древнюю версию jquery %)

    нужно подключить такую https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js или https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

    а скрипт можно вставить сразу на главной после контейнера слайдера:

    <script type="text/javascript">
    ....тут скрипт
    </script>
    

    а можно и header.php и в footer.php

    и если в страницу из админки вставляешь не забудь добавить правила из этой статьи в файл functions.php чтобы атрибуты тегов не удалялись (раздел разрешаем использование в редакторе дополнительных html тегов)

  135. слидер:

    что то я рано обрадовался) Скажите как так сделать а то я чайник в jQuery. Сайт на wordpress. Я хочу использовать ваш вариант слайдера на странице Главная тоесть в контенте. Скачал исходник добавил тесовые изобр. Подключил jQuery добавив в functions.php следующее:

    if (!is_admin()) { 
    wp_deregister_script('jquery'); 
    wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false); 
    wp_enqueue_script('jquery'); 
    }
    

    Разметку слайдера вставил на страницу Главная. Затем стили в style.css. Ну а в конце не знал куда добавить скрипт и вставил его в файла header.php. Ничего не вышло.
    Ну а потом подумал и добавил в functions.php. Ошибка так и думал.
    Что у меня не получилось? Может скрипт не туда добавил? Библиотеку jquery надо скачать? Или же на странице невозможно вставить этот слайдер? Вот так вот. Кажется я что то натворил

  136. слидер:

    Ура! Спасибо, то что искал! Буду использовать ее для отображения услуг

  137. JAH:

    Twip,
    ширину слайда задаем стилями (так же как и ширину контейнера со слайдами), поэтому слайд виден только один

    автопрокрутка и в первом варианте скрипта была просто вызывалась функция autoplay() по клику на кнопку старт а в твоем случае никакого клика не нужно поэтому можно и без объявления функции делать автопрокручивание

    а принцип автопрокручивание такой: саму обретку слайдов смещаем на ширину слайда, потом первый слайд добавляем в конец обертки
    и переменной timer которая содержит функцию setInterval повторяем это дела каждую секунду, кстати 1000 можно поменять на 2000 (это милисекунды) можно указать свое время

  138. Twip:

    Огромное спасибо! А можно узнать что в jQuery за что отвечает? Почему появилась авто прокрутка и стал 1 слайд?)

  139. JAH:

    Twip, привет)

    сначала укажи ширину слайда и скрой кнопки в стилях:

    .slide-item {
    	/* Ширина слайда */
    	width: 880px;
    	/* Внутренние отступы */
    	padding: 10px;
    	/* Обтекание */
    	float: left;
    }
    .navy, .auto {display:none}
    

    Ширину ставь ту которая тебе нужна

    а скрпипт будет такой:

    jQuery(document).ready(function(){
     function htmSlider(){
      var slideWrap = jQuery('.slide-wrap');
      var slideWidth = jQuery('.slide-item').outerWidth();
      var scrollSlider = slideWrap.position().left - slideWidth;
    
      timer = setInterval(function(){
       slideWrap.animate({left: scrollSlider}, 500, function(){
        slideWrap
         .find('.slide-item:first')
         .appendTo(slideWrap)
         .parent()
         .css({'left': 0});
        });
      }, 1000);
     }
     htmSlider();
    });
    
  140. Twip:

    Привет!) А как сделать так чтобы был 1 слайд а не три? И убрать кнопку старта показа т.е. чтобы слайды сами перемещались? без нажатия кнопки)