Фикс от 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. Twip

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

  2. 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();
    });
    
  3. Twip

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

  4. JAH

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

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

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

  5. слидер

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

  6. слидер

    что то я рано обрадовался) Скажите как так сделать а то я чайник в 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 надо скачать? Или же на странице невозможно вставить этот слайдер? Вот так вот. Кажется я что то натворил

  7. 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 тегов)

  8. слидер

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

  9. Бублик32

    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 - уникальный параметр для каждого слайдера-->

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

  10. Бублик32

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

  11. JAH

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

  12. АРтем

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

  13. Margo

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

  14. ДенИС

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

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

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

  15. Виталик

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

  16. ДенИС

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

  17. Виталик

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

  18. ДенИС

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

  19. Виталик

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

  20. Виталик

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

  21. ДенИС

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

    i.onclick=location.href=Ваш адресс'
  22. Иван

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

  23. JAH

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

  24. JAH

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

  25. Виталик

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

  26. Кирилл

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

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

  27. ДенИС

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

  28. JAH

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

  29. Виталик

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

  30. Кирилл

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

  31. ДенИС

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

  32. Сергей

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

  33. JAH

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

  34. Сергей

    Спасибо!

  35. Кирилл

    JAH, есть небольшой вопрос… когда я нахожусь на странице со слайдером — все ок, когда же перехожу на другую, где слайдера нет, то получаю такое сообщение:
    » Uncaught TypeError: Cannot read property ‘left’ of undefined »
    и ссылку на 15 строчку файла slider.js
    В js вообще не силен, подскажите, пожалуйста, то это и как это лечить?

  36. JAH

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

    /*	Функция проверки на существование элемента */
    jQuery.fn.exists = function() {
    	return jQuery(this).length;
    }
    
    if(jQuery(' /* тут айди или клас слайдера */ ').exists()) {
    	
    	а тут сам скрипт слайдера
    	
    }
  37. bulba_man

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

  38. TrojanWar

    Привет всем!

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

    Спасибо.

  39. JAH

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

  40. TrojanWar

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

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

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

  41. ДенИС

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

  42. Nikita

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

  43. Ann

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

  44. JAH

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

  45. Igor Ostancov

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

  46. JAH

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

  47. Михаил

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

  48. Паша

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

  49. Ann

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

  50. GTAlex.ru

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

  51. антон

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

  52. Натали

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

  53. дима

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

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

    Спасибо.

  54. JAH

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

  55. дима

    В хроме если свернуть страницу и через 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();
    });

  56. дима

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

  57. Zzzz

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

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

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

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

  58. Николай

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

  59. Дмитрий

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

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

  60. 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 слайдера, которому можно будет задавать параметры и как плюс можно будет скачать нужный Вам тип слайдера, в скором времени надеюсь закончу и выложу

  61. дима

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

  62. JAH

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

  63. Олег

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

  64. JAH

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

  65. Nadia

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

  66. Дмитрий

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

  67. JAH

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

  68. Craft

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

  69. Анастасия

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

  70. JAH

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

  71. Анастасия

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

  72. Дмитрий

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

  73. Alex

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

  74. Вит

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

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

  75. Иван

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

  76. Andrew

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

  77. JAH

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

  78. 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 можно удалить весь блок функции — это банально центрирование картинки

  79. JAH

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

  80. Andrew

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

  81. DoK

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

  82. JAH

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

  83. Alina

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

  84. JAH

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

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

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

  85. Александр

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

  86. Сергей

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

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

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

  88. Владимир

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

  89. Cardus

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

  90. JAH

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

  91. Иван

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

  92. Иван

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

  93. Иван

    Сделал

    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();
    });
    
  94. Иван

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

    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();
    });
    
  95. Илья

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

  96. Альф

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

  97. JAH

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

  98. Дмитрий

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

  99. Слава

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

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

  100. JAH

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

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

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

  101. Слава

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

  102. JAH

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

    
    if (slider.hasClass('slider2') && slider.find('.slide_item').length < 5) {
      nextLink.hide();
      prevLink.hide();
    }
    
  103. Анна

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

  104. JAH

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

  105. Анна

    У меня их 23 😀

  106. Valery
  107. JAH

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

  108. нихнухнах

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

    Первый слайд


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

  109. нихнухнах

    Первый слайд


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

  110. Александр

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

  111. Блондинка

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

  112. Николай

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

  113. JAH

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

  114. Archgear

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

  115. crunchy

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

  116. Александр

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

  117. Алекс

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

  118. Алекс

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

  119. Александр

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

  120. 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 слайдов при этом будете листать разное к-во картинок

  121. Albert

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

  122. Ольга

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

  123. JAH

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

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

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

  124. Александр

    Добрый день! Не пойму, почему не работает автопрокрутка!
    Вот тут по умолчанию надо что-то менять?
    /* Функция автоматической прокрутки слайдера */
    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;
    });
    }
    }

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

  125. JAH

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

  126. xDuremar

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

  127. xDuremar

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

  128. Александр

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

  129. Сергей

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

  130. Крид

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

  131. Ирина

    В Вашем коде, где Вы исправляли баг с прокруткой при переключении вкладок и сворачиванию окна, потерялась одна закрывающая скобка, из-за которой не хотел работать скрипт.
    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();
    });

  132. JAH

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

  133. ivan

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

    спасибо

  134. JAH

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

  135. Chillwalker

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

  136. Pacman

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

  137. Стас

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

  138. Спортсмен

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