foto-in-tour.ru

25 бесплатных адаптивных слайдеров типа Карусель

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

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

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

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

Демо 31341 Скачать 6763

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

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

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

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

  • общий контейнер (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%; }

Заключение

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

Оптимизация подключения Google Maps, отключение ненужных файлов стилей и шрифтов, отрисовка карты тока в случае наличия контейнера на странице

Знакомьтесь с моим новым jQuery плагином Formcheck.js для проверки полей формы. Можно легко проверить поле на заполненность, правильность ввода телефона, правильность ввода email и проверить отмечены ли обязательные чекбоксы, все бесплатно - все

Здравствуйте, дорогие читатели! Я как всегда с сюрпризом) В этой статье я покажу Вам, как можно сделать поле для ввода телефона, но не простое а золотое, с маскировкой и проверкой. Что такое маскировка поля? Наверняка Вы уже сталкивались с такой

Сегодня поделюсь с Вами моим скриптом, который я использую для простой проверки полей форм на заполненность перед отправкой их на сервер, с помощью jQuery (скрипт может проверять сразу несколько форм на странице)

Давненько, я ничего не писал про jQuery, все как-то руки не доходили. Будем решать задачу по работе со строкой товаров/услуг/статей, скрывая последний элемент строки при изменении ширины строки с элементами

Хочу поделиться с Вами HTML разметкой секции head, которую я использую для верстки сайтов

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

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

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

Responsive design = отзывчивый дизайн = аксиома. Минимальная история развития веб дизайна: его путь от фиксированного до жидкого и до отзывчивого (реагирующего, адаптивного, responsive) дизайна

Адаптивный слайдер jquery своими руками фото
Адаптивный слайдер jquery своими руками 89
Адаптивный слайдер jquery своими руками 73
Адаптивный слайдер jquery своими руками 39
Адаптивный слайдер jquery своими руками 38
Адаптивный слайдер jquery своими руками 4
Адаптивный слайдер jquery своими руками 58
Адаптивный слайдер jquery своими руками 12
Адаптивный слайдер jquery своими руками 61
Адаптивный слайдер jquery своими руками 22
Адаптивный слайдер jquery своими руками 12
Адаптивный слайдер jquery своими руками 40
Адаптивный слайдер jquery своими руками 54
Адаптивный слайдер jquery своими руками 36
Адаптивный слайдер jquery своими руками 38
Адаптивный слайдер jquery своими руками 22
Адаптивный слайдер jquery своими руками 71
Адаптивный слайдер jquery своими руками 40
Адаптивный слайдер jquery своими руками 36
Адаптивный слайдер jquery своими руками 97
Адаптивный слайдер jquery своими руками 72
  • Освещение на участке частного дома фото своими руками
  • Выращивание астранции
  • Как вставить открытку в обсуждения
  • Куколка-оберег своими руками
  • Скрапбукинг своими руками штампы
  • Поздравления с днем рождения племяшкам двойняшкам