- розмітка слайдера
- стилі слайдера
- пишемо скрипт
- пояснення:
- Два і більше слайдерів на сторінці
- висновок
Усунений баг з автопрокруткою при перемиканні вкладок або при згортанні вікна браузера. Прибрана перевірка наявності атрибута name у посилань вперед / назад.
Оновлений архів з вихідними кодами.
Фікс від 19 червня 2013:
Додана можливість використовувати кілька слайдерів на сторінці, поки без підтримки автопрокрутки, тому архів з вихідними кодами і сторінку демо не оновлюється.
Поправив баг появи картинок під стрілочками
Про те як запустити автопрокрутку без натискання на кнопку play я відповів у другому коментарі
Слайдери (ротатори контенту [зображень, тексту, відео]) присутні в кожному проекті. В інтернеті, реально, купа проектів, де можна скачати і підібрати на свій смак практично будь-який плагін слайдера. Однак, бувають ситуації, коли підключати до проекту слайдер, мінімізована версія якого важить від 10кб - недоцільно.
Припустимо, Вам потрібно зробити слайдер, який містить 15-20 картинок з підписами або пару трійку відеороликів. Саме для таких випадків Вам і стане в нагоді цей урок, де Ви навчитеся робити слайдер з горизонтальною прокруткою, причому не оптимізований скрипт буде важити менше 2Кб. Натиснувши нижче кнопку «Demo» Ви можете подивитися демонстрацію уроку, а якшо по кнопці «Source», отримаєте архів уроку (з коментарями), до речі щоб навчитися робити простий слайдер на мініатюрах прочитайте цю статтю .
Для розуміння, суті скажу, що в кінці уроку ми отримаємо слайдер з такими функціями:
- Перемикання слайдів вліво-вправо
- Режим автоматичної роботи слайдера, кнопки старт-пауза
- Необмежена кількість слайдів
розмітка слайдера
Розмітка слайдера дуже проста, нам знадобиться:
- загальний контейнер (slider),
- Три контейнера для навігації (дві кнопки на попередній / наступний слайд (navy) і одна кнопка (auto) для кнопок старт / пауза),
- контейнер для всіх слайдів (slide-list),
- обгортка всіх слайдів (slide-wrap).
стилі слайдера
Для стилізації слайдера, додамо чучуть правил в файл стилів.
/ * Задаємо скидання обтікання * / .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 - вони реально круті)
За кліці на кнопку автоматичної роботи слайдера, відбуваються такі події:
- Якщо у кнопки встановлено клас play, то міняємо цей клас на pause, приховуємо кнопки вперед / назад [щоб вони не порушували роботу слайдера], і запускаємо за допомогою змінної timer автопрокрутку.
- Якщо у кнопки встановлено клас 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 }) .f ind ( '. 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%; }висновок
Сьогодні Ви побачили і навчилися створювати елементарний анімований слайдер з горизонтальною прокруткою своїми руками без використання плагінів. Питання, побажання та подяки залишайте в коментарях, бувайте здорові!
