Содержание
Как сделать слайдер на CSS и HTML, без Javascript
В одной из предыдущих статей мы рассмотрели, как сделать вкладки на CSS при помощи трюка с радио-кнопками. В этой статье мы при помощи аналогичного подхода создадим симпатичный слайдер, не требующий Javascript для работы.
Слайдеры, как правило делаются с использованием Javascript. Обычно для этого задействуют библиотеку JQuery. Хотя CSS и не позволяет создать полнофункциональный слайдер с кучей возможностей, таких как анимация по таймеру, листание пальцем на тач-скрине и т.п., во многих случаях такие продвинутые возможности и не требуются.
Простой слайдер для блога гораздо проще сверстать на чистом HTML и CSS, чем задействовать для этого возможности Javascript.
Обратите внимание
Во-первых, код стилей слайдера получится гораздо проще и понятнее, чем код слайдера на Javascript.
Во-вторых, та часть пользователей, которая параноидально не доверяет сайтам и заходит на незнакомые сайты только с аддоном NoScript, вырезающим весь JS-код, тоже сможет воспользоваться вашим слайдером.
Поехали!
Простой слайдер с анимированным переключением кадров
Примечание: В этом примере я буду ориентироваться на самые новые возможности CSS. Код не предназначен для работы в старых браузерах.
Начнём создание слайдера с такого кода:
Контейнер слайдера — div с классом sliderA. Каждый кадр слайдера описывается трёмя тегами:
- Радиокнопкой (input type=»radio»), отвечающей за состояние данного кадра (видно / не видно)
- Меткой label, отвечающей за отображение кнопки перехода на данный слайдер.
- Тегом div в котором находится содержимое кадра.
Радиокнопки внутри одного слайдера должны иметь одинаковое имя name. Также, все радиокнопки должны иметь уникальные (различные) идентификаторы id. Метка в поле for должна содержать значение id соответствующей радиокнопки. (Если вам не понятно, почему и зачем всё это делается читайте статью про вкладки. Там всё это объяснено подробно.)
Начинаем работать над стилями. Контейнер:
Мы задаём фиксированные размеры контейнера. Я установил их равными размеру изображений, которые я буду использовать в этом примере.
Свойство position: relative необходимо, чтобы задать новую точку отсчёта позиций вложенных контейнеров.
Свойство text-align: center я добавил, чтобы выровнять по центру полосу меток-кнопок, которые я буду позиционировать как inline-элементы.
Отображение радиокнопок нам не нужно, скрываем их:
Оформляем метки-кнопки. Кода много, но ничего сложного нет:
Я устанавливаю свойство display: inline-block, что позволит разместить метки одной строкой и выровнять их по центру как строчные элементы, и вместе с тем задать им фиксированные размеры как блокам. Затем я задаю ширину и высоту, а также радиус скругления углов, цвет фона и цвет границы. Всё это приводит к тому, что наши метки будут отображаться в виде маленьких круглых кнопок.
Свойство cursor позволяет задать внешний вид курсора мыши при наведении на кнопку. Я установил значение pointer, т.е. вид указателя мыши будет такой же, как при наведении на ссылку («указательный палец»).
Свойство z-index необходимо для того, чтобы метки-кнопки лежали поверх кадров слайдера. Для этого же установлено свойство position: relative — иначе z-index не будет работать.
margin-right добавляет отступы между кнопками, а top: 90% сдвигает их в нижнюю часть контейнера. Можно было задать вертикальную позицию кнопок более грамотно, но здесь я ограничусь этим способом.
Важно
Также я задаю цвет фона для нажатой кнопки и кнопки, на которую наведена мышь. Свойство transition определяет анимацию для смены фона.
Также нам следовало устранить все пробелы и переводы строк между тегами слайдера, так как при использовании display: inline-block они дадут нам лишние зазоры между кнопками. Так мы поступали в предыдущей статье. Я не стал сейчас этого делать для упрощения восприятия кода HTML.
Получилась вот такая заготовка слайдера:
Добавляем стили для div-ов, в которых будет находиться содержимое кадра:
Все кадры будут занимать одно и то же положение. position: absolute позволяет изъять блоки из потока и разместить из произвольным образом.
top, left, right, bottom задают координаты кадра таким образом, что кадр занимает весь контейнер слайдера целиком.
z-index отправляет кадры под кнопки переключения кадров, иначем мы не сможем эти кнопки ни увидеть, ни нажать.
Теперь самая главная часть слайдера — показ и скрытие кадров в зависимости от нажатой кнопки. Традиционный подход скрытия элементов страницы с использованием свойства display: none нам не совсем подходит. Ведь для слайдера хотелось бы сделать плавное переключение кадров, но CSS не позволяет задать анимацию значения display при помощи правил transition.
Для плавного скрытия и появления кадров нам понадобятся два свойства: opacity и visibility; а также упомянутый transition.
Свойство opacity позволяет в виде десятичной дроби задать уровень прозрачности элемента страницы, от 0 (полностью прозрачный) до 1 (полностью непрозрачный). Например, opacity: 0.5 — прозрачность 50%.
Но даже полностью прозрачный элемент, хоть и невидимый, продолжает реагировать на нажатия мышью. Поэтому, если у вас в слайдере находятся ссылки, нажатие на ссылку может привести к срабатыванию совсем не той ссылки, которая видна на экране.
Чтобы полностью отключить элемент и сделать его прозрачным для щелчков мышью, понадобится второе свойство: visibility: hidden. Однако visibility не позволяет задать частичную прозрачность. Элемент либо виден, либо нет.
Поэтому мы будем при помощи transition анимировать оба свойства, чтобы добиться нужного нам эффекта. Суть метода в следующем:
- Когда пользователь переключает кадр, новый кадр появляется с visibility: visible, но с opacity: 0.
- Затем происходит анимация значения opacity у обоих кадров. У старого кадра она плавно опускается до нуля, а у нового — плавно поднимается до единицы.
- После завершения анимации, visibility старого кадра устанавливается в значение hidden, чтобы он не мешал щелчкам мышью по новому кадру.
Вот такой код у меня получился:
Также я добавил правило для тега p внутри кадра, чтобы сделать подписи к картинкам:
Дописываем HTML-код слайдера для нашего примера:
И получаем вот такой результат:
Простой слайдер с анимированным переключением кадров, второй вариант
В слайдере можно размещать как обычные фотографии, так и любой текст, ссылки на другие страницы сайта и так далее.
В случае, когда вы используете слайдер для размещения простых изображений (например, вы турист, и публикуете фотографии из ваших путешествий) возникает желание усовершенствовать слайдер так, чтобы нажатие на слайдер приводило к переходу к следующему изображению. В предыдущем примере кадры слайдера переключаются только круглыми кнопками, а нажатие на само изображение ничего не даёт.
Усовершествуем наш слайдер. В шаблон слайдера добавим по еще одной метке для каждого кадра:
Совет
Как видите, метка идущая после первого кадра, активирует второй кадр. Метка, расположенная после второго кадра, активирует третий кадр; после третьего — чертвёртый. Последняя метка активирует первый кадр.
Метки мы расположим так, чтобы они перекрывали весь слайдер и лежали выше изображения, но ниже полосы кнопок. Метки прозрачные, поэтому сквозь них видно содержимое кадра. При показе кадра номер N вместе с ним отображается метка для перехода на кадр N + 1. (Для последнего кадра — метка перехода на первый кадр.)
Таким образом, при щелчке по изображению срабатывает активация следующего изображения. Результат:
У нас получился симпатичный слайдер для фотографий с вкладочным переключением кадров. Такой слайдер отлично подойдёт, например, для публикации фотографий в блоге о путешествиях.
В следующей статье о CSS я рассмотрю другой вариант слайдера: с переключением кадров при помощи кнопок «вперёд» и «назад».
Как сделать простой слайдер на JavaScript без JQuery
От автора: при изучении JS люди очень часто ищут статьи о том, как создать слайд шоу, карусель изображений, слайдер или ротатор. В этом уроке мы: создадим простенькое слайд шоу без внешних библиотек типа JQuery; разберем проблемы UX и доступности, а также моменты, когда стоит использовать слайд шоу, а когда нет; добавим элементы управления.
Главное преимущество слайд шоу без каких-либо библиотек в их производительности из-за маленького кода, такие слайд шоу можно использовать где угодно и не бояться, а подключены ли внешние файлы.
Наш урок предполагает базовые знания языка JavaScript: функции, событие клика и изменение стилей. Я написал руководство о том, что и в какой последовательности стоит изучать в JavaScript, чтобы быстро начать применять полученные знания на практике.
Создаем простое слайд шоу
Нам понадобится контейнер для слайдов и сами слайды. Вот так это будет выглядеть:
Бесплатный курс «Full-Stack практика»
Изучите курс и узнайте, как создать веб-приложение с нуля на JavaScript, NodeJS, ExpressJS
Получить курс
Slide 1 Slide 2 Slide 3 Slide 4 Slide 5
Базовые стили должны:
Задавать контейнер для слайдов
Располагать слайды один над другим внутри контейнера
Определять поведение слайдов при появлении и исчезновении
Плавно изменять прозрачность для эффекта затухания и появления
Прежде чем смотреть в CSS не забудьте сменить классы и идентификаторы, чтобы не было конфликтов с вашими сайтами. В нашей статье имена классов и идентификаторов будут короткими. Вот наш CSS:
С ними работает слайд шоу -webkit-transition: opacity 1s; -moz-transition: opacity 1s; -o-transition: opacity 1s;
Теперь можно добавить стили внешнего вида слайд шоу. Для нашего демо я использовал следующие стили:
Внешний вид; можете изменять
JavaScript
JS выполняет одну задачу: прячет текущий слайд и показывает следующий. Для этого нам потребуется сменить названия классов слайдов. Вот наш код JS:
var slides = document.querySelectorAll(‘#slides .slide’);var slideInterval = setInterval(nextSlide,2000); slides[currentSlide].className = ‘slide’; currentSlide = (currentSlide+1)%slides.length; slides[currentSlide].className = ‘slide showing’;
Разберемся, что здесь происходит:
Первое, мы с помощью querySelectorAll получаем все слайды из контейнера.
Затем мы создаем переменную для получения текущего слайда.
В конце мы задаем интервал в две секунды для следующего слайда (2000ms).
Подробнее разберем функцию nextSlide:
Мы меняем класс для текущего слайда, чтобы спрятать его. Свойство transition автоматически обрабатывает плавное затухание.
Потом добавляем класс к текущему слайду. Мы используем оператор % на случай, если это был последний слайд, чтобы вернуться к первому. Данный оператор отлично подходит в случаях, когда необходимо выполнять математические операции с циклами типа часов или календаря. В нашем случае 5 слайдов. Посчитаем все числа: 1%5=1, 2%5=2, 3%5=3, 4%5=4, and 5%5=0.
Обратите внимание
После получения индекса слайда мы меняем класс и показываем новый. И опять прозрачность обрабатывается свойством transition.
Вот и все, мы создали самое простое слайд шоу. По поводу совместимости: Свойство transition не поддерживается в IE9 и ниже, в таком случае эффект затухания сменится на обычный резкий переход к следующему слайду. Базовое слайд шоу:
UX и доступность
Прежде чем использовать слайд шоу определитесь с его ролью на странице. Давайте разберем, как слайд шоу может убить весь пользовательский опыт и доступность на сайте, если неправильно его использовать.
Слайд шоу может скрывать критический контент
Если у вас на сайте есть очень важный контент, его нельзя прятать в слайд шоу. Нельзя надеяться на идеальное стечение обстоятельств, что пользователь увидит именно нужный слайд, не говоря уже о доступности.
По исследованию Университета Нотр-Дам только 1.07% людей кликают на контент в слайд шоу, а из этой маленькой доли людей только 3% кликают на другие слайды помимо первого. Данный пример показывает опасность при расположении критического контента в слайд шоу.
Пользователь может неправильно понять основную задачу сайта
Эта проблема особо остро стоит на сайтах с большими слайд шоу на домашних страницах. Если вы не можете точно определиться, что показывать пользователям, как они поймут, что нужно делать на вашем сайте?
Ваш сайт должен быть абсолютно прозрачен и понятен, чтобы не захотел сделать пользователь. Если слайд шоу мешает этому, может быть, стоит пересмотреть стратегию данной страницы.
Фирма по оптимизации конверсии WiderFunnel провела исследования эффективности слайд шоу и пришла к следующему выводу: «Мы протестировали ротаторы специальных предложений и выяснили, что они плохо представляют контент на домашней странице.»
Слайд шоу может разозлить мобильных пользователей
Слайд шоу может увеличить время загрузки и потребление данных на мобильных устройствах. Помимо всего прочего управление такими ротаторами на мобильных экранах может быть крайне неудобно.
Когда применять слайд шоу
Если учесть все потенциальные проблемы, то когда же все-таки нужно использовать слайд шоу? Вот несколько советов.
Создание общего впечатления
Если вам неважно, увидит ли пользователь все слайды, и вы хотите просто создать общее хорошее визуальное впечатление, то можно использовать слайд шоу. В таком случае даже если пользователь не увидит остальных слайдов, ничего страшного он не упустит.
Когда к контенту легко получить доступ из другого места
К примеру, вы хотите показать фотографии какого-либо курорта, события или товара в слайд шоу, а на сайте уже есть галерея в другом месте. В таком случае можно использовать слайд шоу.
При использовании техники прогрессивного улучшения
Более общий случай, но аккуратный слайдер не должен вызвать каких-то проблем или сильно повлиять на функциональность сайта. Пока слайдер остается лишь дополнением, которое можно в любой момент убрать, и не критичен в конструкции сайта, его можно использовать.
Советы по доступности
Если контент в слайдере очень важен, и его нужно сделать доступным, хорошенько подумайте о месте расположения слайдера. Если вы или ваши клиенты настаиваете на слайдере, то вам стоит прочесть эту замечательную статью о доступности.
Из статьи: «Для создания доступного слайдера необходимо соблюсти 5 условий:
Пользователь должен быть способен остановить любое движение
Необходимо создать видимые элементы управления, доступные через клавиатуру, мышь и тачскрин
Обеспечить правильный порядок фокусировки в слайдере
Валидный код и стили
Предоставить понятную альтернативу слайдеру»
Также один из пользователей в комментариях дал ссылку на полезный ресурс, который поможет решить, нужен ли вам слайдер или нет. Мы добавим нашему слайдеру элементы управления, чтобы сделать его более доступным.
Бесплатный курс «Full-Stack практика»
Изучите курс и узнайте, как создать веб-приложение с нуля на JavaScript, NodeJS, ExpressJS
Получить курс
Добавляем элементы управления в слайдер
Пора добавить кнопку паузы, следующий слайд и предыдущий слайд. Кнопка паузы. Сперва, добавьте кнопку в HTML:
Pause
Потом добавьте этот код JS:
var pauseButton = document.getElementById(‘pause’);function pauseSlideshow() { pauseButton.innerHTML = ‘Play’; clearInterval(slideInterval);function playSlideshow() { pauseButton.innerHTML = ‘Pause’; slideInterval = setInterval(nextSlide,2000);pauseButton.onclick = function() {
Что происходит в скрипте:
Переменная playing хранится в моменты, когда слайдер активен.
Кнопку паузы мы занесли в переменную pauseButton, чтобы потом не искать ее по документу.
Функция pauseSlideshow останавливает слайдер, а в кнопку паузы записывает «Play».
Функция playSlideshow запускает слайдер, а в кнопку Play записывает Pause.
В конце мы вешаем обработчик клика, чтобы кнопка play/pause могла ставить слайдер на паузу и запускать его.
Вот так работает наш слайдер с кнопкой паузы:
Кнопки следующий и предыдущий
Сначала добавьте кнопки Next и Previous в HTML:
PreviousNext
В JavaScript измените функцию:
slides[currentSlide].className = ‘slide’; currentSlide = (currentSlide+1)%slides.length; slides[currentSlide].className = ‘slide showing’;
…на:
goToSlide(currentSlide+1);function previousSlide() { goToSlide(currentSlide-1); slides[currentSlide].className = ‘slide’; currentSlide = (n+slides.length)%slides.length; slides[currentSlide].className = ‘slide showing’;
Для большей гибкости в скрипте выше мы добавили общую функцию goToSlide. Также чтобы не получить отрицательное значение, мы слегка изменили способ вычисления переменной currentSlide. Для теста вы можете заменить slides.length на свое число и посмотреть, что попадет в currentSlide с изменением значения n. Добавьте код ниже в скрипт, чтобы кнопки начали работать:
var next = document.getElementById(‘next’);var previous = document.getElementById(‘previous’);next.onclick = function() {previous.onclick = function() {
Теперь у нас есть работающие кнопки управления слайдером! Вот так может выглядеть слайдер с кнопками управления и парочкой стилей:
Обратите внимание, чтобы автопроигрывание не помешало переключению между слайдами, мы ставим его на паузу, когда пользователь кликает на кнопки Next и Previous. Кнопки управления доступны на клавиатуре автоматически, так как это обычные HTML теги.
Можете изменять стили и перемещать кнопки в любое место, главное, чтобы они были хорошо видны и работали. Если вы хотите добавить переключение по слайдеру с помощью стрелок на клавиатуре, то отключайте эту функцию, если пользователь использует стрелки явно не на слайдере – к примеру, в текстовом поле.
Фолбэк на случай если JavaScript недоступен
Бывают случаи, когда JavaScript не смог загрузиться, отключен, не поддерживается устройством и т.д. В идеале пользователь даже в таких случаях получит что-то работающее. Какой фолбэк вы создадите зависит от вас. Можно показывать только первое изображение или же все списком.
Если основная задача слайдера это оказать хорошее общее впечатление, тогда намного важнее сохранить макет страницы, чем показывать все изображения. В таких случаях можно показывать только первое изображение. Если же нужно показать именно все изображения, тогда их можно отобразить списком. Разберем оба случая.
Прячем кнопки если JavaScript недоступен
Прячьте кнопки с помощью CSS по умолчанию.
Затем показывайте их с помощью JS. Так пользователь увидит кнопки только, если JS активен.
var controls = document.querySelectorAll(‘.controls’);for(var i=0; i
Крутые слайдеры на чистом CSS без использования jQuery/Javascript
Я очень люблю слайдеры изображений или текста, с использованием чистого CSS.
Точно так же, я всегда ненавидел медленные слайдеры, использующие JQuery или JavaScript, при использовании в своих WordPress темах или HTML веб-сайтах.
Я подобрал несколько интересные CSS слайдеров из codepen / GitHub и других сайтов, для использования в веб-сайт или в темах. Внимание: Пожалуйста, убедитесь, что слайдеры работают в Safari, Chrome и FF перед использованием в ваших проектах.
CSS3 Multi Animation Slider
Слайдер с несколькими анимациями для изображений с описаниями.
http://codepen.io/Eliteware/full/BoBgqV/
CSS Juizy Slideshow
Слайдшоу с использованием CSS and html
http://www.creativejuiz.fr/trytotry/juizy-slideshow-full-css3-html5/
CSS Featured Image slider
Симпатичный слайдер с использованием только css.
https://codepen.io/joshnh/full/KwilB/
CSS Image slider
http://codepen.io/AMKohn/details/EKJHf
CSS3 Thumbnail Slider
Сладер на чистом CSS с миниатюрами.
thecodeplayer.com
HTML5 CSS Driven Slider
Простой html5/css слайдер.
http://codepen.io/dudleystorey/full/kFoGw/
CSS Accordian slider
iAuto является классным аккордионом на css и html.
http://codepen.io/JFarrow/full/iAuto/
Responsive no javascript CSS3 Slider
Адаптивный слайдер с подписями. Без javascript
http://csscience.com/responsiveslidercss3/
CSS3 Clickable Slider
Простой управляемый слайдер с кнопками “вперёд” и “назад”.
http://codepen.io/johnmotyljr/full/cDpEH/
Gallery CSS slider
http://benschwarz.github.io/gallery-css/
KeyFrames Slider
Слайдер бэкграунда с использованием css кейфреймов.
https://github.com/stephenscaff/keyframes-slider
CSS Slider
Слайдер на чистом css (без JS, без jquery)
http://codepen.io/drygiel/full/rtpnE/
CSS Slider
Профессионально сделанный слайдер имеющий более 20 стилей и кнопок.
http://cssslider.com
Elegant Responsive CSS slider
http://codepen.io/rizky_k_r/full/shmwC/
Pure CSS slider content
https://codepen.io/johnlouie04/full/BqyGb/
Responsive CSS3 Slider
Простой слайдер на html и css3 с подписями.
http://dreyacosta.github.io/pure-responsive-css3-slider/
CSS3 slider without Javascript
Слайдер на чистом css3 с хлебными крошками в виде подписей.
http://codeconvey.com/Tutorials/cssSlider/
Pure CSS slider
Очень простой слайдер изображений.
http://codepen.io/ClearDesign/full/KpQEyv
CSS Sliding Checkboxes
Кнопки на чистом css с эффектом слайдера.
http://tstachl.github.io/slidr.css/
Pure CSS3 Cycle Slider
Слайдер с индикатором загрузки.
http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/
CSS Accordian Slider
Создайте сами аккордеон с использованием только css и html (без javascript).
http://accordionslider.com/
Pure CSS Slides
https://github.com/littleli/PureCssSlides
CSS3 Image Collapse
http://anroots.github.io/css3-image-collapse/
PureCSS Image comparison Slider
Image comparison slider with pure CSS
Использованы материалы сайта corpocrat.com
- Краткий обзор CSS3
- Веб-сервер “под ключ” на базе CentOS 7.1
Как создать красивый слайдер для сайта с помощью CSS3 и HTML
2014-10-27 / Вр:00:40 / просмотров: 19486
Если вам нужен простенький слайдер для сайта, вы попали по адресу. Предложенный мной слайдер очень прост, сделан на чистейшем CSS3 и не требует использования javascript, jQuery и др. Простой далеко не значит никакой, слайдер имеет красивый эффект затухания, а с правой стороны выезжает текст.
Этот красивый слайдер я уже опробовал на практике для одного заказа. Заказчик был доволен.
Итак, для начала вы можете посмотреть демонстрацию этого слайдера:
[посмотреть демонстрацию] или [скачать исходник]
Давайте приступим к созданию слайдера и настроим его, так как мы хотим.
Для начала создайте файл «index.html», папку «images» и залейте туда четыре картинки img1.jpg, img2.jpg, img3.jpg, img4.jpg .
Откройте HTML-файл и вставьте этот код в то место, где вы хотите, чтобы отображался слайдер (но обязательно между тегами ).
- Текст для слайдера #1
- Текст для слайдера #2
- Текст для слайдера #3
- Текст для слайдера #4
Как видите, в коде я создал четыре слайда. Туда входит картинка (img1.jpg, img2.jpg, img3.jpg, img4.jpg), описание к картинке (title) и текст для картинки.
- Текст для слайдера #1
Если вам нужно добавить больше слайдов, достаточно добавить вот эту строчку перед
:
- Текст для слайдера #5
Пример с картинкой:
Увеличить картинку?
Вот так это будет выглядеть:
- Текст для слайдера #1
- Текст для слайдера #2
- Текст для слайдера #3
- Текст для слайдера #4
- Текст для слайдера #5
Теперь создайте CSS файл и вставьте следующий код:
/* ползунок */ .slides { height:300px; margin:50px auto; overflow:hidden; position:relative; width:900px; } .slides ul { list-style:none; position:relative; } /* keyframes #anim_slides */ @-webkit-keyframes anim_slides { 0% { opacity:0; } 6% { opacity:1; } 24% { opacity:1; } 30% { opacity:0; } 100% { opacity:0; } } @-moz-keyframes anim_slides { 0% { opacity:0; } 6% { opacity:1; } 24% { opacity:1; } 30% { opacity:0; } 100% { opacity:0; } } .slides ul li { opacity:0; position:absolute; top:0; /* css3 анимация */ -webkit-animation-name: anim_slides; -webkit-animation-duration: 24.0s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; -moz-animation-name: anim_slides; -moz-animation-duration: 24.0s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; } /* css3 delays */ .slides ul li:nth-child(2), .slides ul li:nth-child(2) div { -webkit-animation-delay: 6.0s; -moz-animation-delay: 6.0s; } .slides ul li:nth-child(3), .slides ul li:nth-child(3) div { -webkit-animation-delay: 12.0s; -moz-animation-delay: 12.0s; } .slides ul li:nth-child(4), .slides ul li:nth-child(4) div { -webkit-animation-delay: 18.0s; -moz-animation-delay: 18.0s; } .slides ul li img { display:block; } /* keyframes #anim_titles */ @-webkit-keyframes anim_titles { 0% { left:100%; opacity:0; } 5% { left:10%; opacity:1; } 20% { left:10%; opacity:1; } 25% { left:100%; opacity:0; } 100% { left:100%; opacity:0; } } @-moz-keyframes anim_titles { 0% { left:100%; opacity:0; } 5% { left:10%; opacity:1; } 20% { left:10%; opacity:1; } 25% { left:100%; opacity:0; } 100% { left:100%; opacity:0; } } .slides ul li div { background-color:#000000; border-radius:10px 10px 10px 10px; box-shadow:0 0 5px #FFFFFF inset; color:#FFFFFF; font-size:26px; left:10%; margin:0 auto; padding:20px; position:absolute; top:50%; width:200px; /* css3 анимация */ -webkit-animation-name: anim_titles; -webkit-animation-duration: 24.0s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; -moz-animation-name: anim_titles; -moz-animation-duration: 24.0s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; }
Как видите, все просто.
Последние новости категории:
Создание слайдера на jQuery
В этом уроке для веб разработчиков мы продемонстрируем создание слайдера на HTML, CSS, и JavaScript (jQuery) и добьёмся, чтобы он работал во всех браузерах (с активированным и дезактивированным JavaScript).
Начало работы
Одним из самых важных аспектов работы над новым проектом, является создание HTML структуры. Мы должны добиться того, чтобы данный слайдер одинаково отображался во всех браузерах и работал даже на тех, где отключен JavaScript.
Для реализация слайдера нам понадобится блок с id #slideshow, который будет играть роль родительского контейнера. Внутри него будет располагаться другой блок div с именем #slideContainer. Он будет содержать сами слайды, каждому из которых будет приписан класс .slide.
Блок 1: HTML
Вы можете заметить, что в приведённом фрагменте кода нет ничего связанного с элементами контроля нашего слайдера. Мы их добавим в DOM позже, посредством JavaScript скрипта. Если их добавить сейчас, то они будут смущать тех, кто отключает поддержку CSS или JavaScript.
Вариант 1: Полноценный слайдер
Заметка: Проверяйте работу после каждого изменения. Если вы занимаетесь разработкой чего-то нового, то всегда тестируйте работу проведённых изменений, будь то даже изменение HTML структуры. Вы можете использовать специальный инструмент WebAnywhere для тестирования содержания.
Стилизуем слайдер
Следующим действием мы оформим наш дизайн и предусмотрим несколько вещей для тех пользователей, которые отключают JavaScript.
Для элемента с id #slidesContainer, мы назначим overflow в auto для того, чтобы общая высота блока растянулась до 263px.
Блок 2: CSS #slidesContainer
#slideshow #slidesContainer { margin:0 auto; width:560px; height:263px; overflow:auto; /* разрешаем прокрутку */ position:relative; }
Нам необходимо немного уменьшить ширину блока с классом .slide на 20px для того, чтобы появилось место для области прокрутки слайдов для тех, у кого отключен JavaScript.
Блок 3: CSS класс .slide
#slideshow #slidesContainer .slide { margin:0 auto; width:540px; height:263px; }
С отключённым JavaScript, наш контент всё равно доступен для пользователей; благодаря прокрутке они могут просматривать слайды.
Вариант 2: Слайдер без JavaScript
В качестве альтернативы, вы можете добавить классу .slide дополнительное свойство float:left; для того чтобы пользователи без JavaScript могли прокручивать слайды горизонтально.
Стрелки вправо и влево
Для того чтобы добиться большей производительности, мы добавим элементы контроля над слайдером посредством изменения DOM при помощи jQuery.
Элементы будут представлять из себя span элемент, поэтому мы назначили свойству cursor значение pointer для создания эффекта наведения мыши на кнопку. Так же мы используем свойство text-indent для того, чтобы спрятать текст.
Блок 4: Элементы контроля
/** * Slideshow controls style rules. */ .control { display:block; width:39px; height:263px; text-indent:-10000px; position:absolute; cursor: pointer; } #leftControl { top:0; left:0; background:transparent url(img/control_left.jpg) no-repeat 0 0; } #rightControl { top:0; right:0; background:transparent url(img/control_right.jpg) no-repeat 0 0; }
Самое интересное… JavaScript
После того, как мы подготовили наш HTML и CSS, самое время заняться основным скриптом. Для создания анимации и прочих фишек мы будем использовать библиотеку jQuery.
Теория
Первое, что нам необходимо сделать, так это изменить значения свойств CSS посредством JavaScript скрипта.
Нам необходимо сделать это для элемента #slidesContainer, чтобы устранить область прокрутки. Вдобавок нам необходимо изменить размер элементов с классом .slide на 20px.
Также нам необходимо применить свойство float для того, чтобы слайды следовали друг за другом, а не один под другим.
Важно
Затем, благодаря манипуляции DOM, мы вставим блок div с id #slideInner, который будет содержать внутри себя все слайды с классом .slide.
В конце концов, мы вставим элементы контроля (с классом .control) для того, чтобы пользователи могли переключать слайды; это мы сделаем средствами JavaScript, чтобы тем, у кого он отключён, элементы контроля не отобразились.
Вашему вниманию я представляю код JavaScript детальное описание которого последует ниже.
Блок 5: Главный скрипт jQuery
$(document).ready(function(){ var currentPosition = 0; var slideWidth = 560; var slides = $(‘.slide’); var numberOfSlides = slides.length; // Убираем прокрутку $(‘#slidesContainer’).css(‘overflow’, ‘hidden’); // Вставляем все .slides в блок #slideInner slides .
wrapAll(”) // Float left to display horizontally, readjust .slides width .css({ ‘float’ : ‘left’, ‘width’ : slideWidth }); // Устанавливаем ширину #slideInner, равную ширине всех слайдов $(‘#slideInner’).
css(‘width’, slideWidth * numberOfSlides); // Вставляем элементы контроля в DOM $(‘#slideshow’) .prepend(‘Move left’) .append(‘Move right’); // Прячем правую стрелку при загрузке скрипта manageControls(currentPosition); // Отлавливаем клик на класс .controls $(‘.control’) .
bind(‘click’, function(){ // Определение новой позиции currentPosition = ($(this).attr(‘id’)==’rightControl’) ? currentPosition+1 : currentPosition-1; // Прячет / показывает элементы контроля manageControls(currentPosition); // Move slideInner using margin-left $(‘#slideInner’).
animate({ ‘marginLeft’ : slideWidth*(-currentPosition) }); }); // manageControls: показывает или скрывает стрелки в зависимости от значения currentPosition function manageControls(position){ // Спрятать левую стрелку, если это левый слайд if(position==0){ $(‘#leftControl’).hide() } else{ $(‘#leftControl’).
show() } // Спрятать правую стрелку, если это последний слайд if(position==numberOfSlides-1){ $(‘#rightControl’).hide() } else{ $(‘#rightControl’).show() } } });
Создаём объекты
В первую очередь, мы инициализируем некоторые переменные в самом начале скрипта.
currentPosition будет содержать текущую позицию. slideshow.slideWidth — это ширина каждого блока .slide, которая равна 560px. Я предпочёл объявить объект для селектора $(‘.slide’), для того чтобы код смотрелся немного чище, но вы можете поступить по-другому и в дальнейшем использовать запись ($(‘.slide’)).
И наконец, мы определяем количество слайдов в нашем слайдере, используя метод .length.
Блок 6: Переменные и константы
var currentPosition = 0; var slideWidth = 560; var slides = $(‘.slide’); var numberOfSlides = slides.length;
Убираем прокрутку
Когда скрипт запустится для тех, у кого включён JavaScript, мы уберём элемент прокрутки, установив значение hidden элементу slidesContainer, и это будет заменять переполнение overflow:auto CSS (смотри Блок 3).
Блок 7: Изменения значения свойства CSS overflow на hidden
$(‘#slidesContainer’).css(‘overflow’, ‘hidden’);
Вставка div в DOM
Мы будем использовать свойство margin для перемещения слайдов влево и вправо (но чуть позже). Для этого нам необходимо создать специальный блок, в который будут вписаны все блоки с классом .slide, совпадающие с ним по ширине и высоте. Изменяя значение внешних отступов для этого элемента, мы создадим эффект перемещения в разные стороны.
Блок 8: Вставка #slideInner в DOM используя метод .wrapAll()
Нам также необходимо обозначить ширину #slideInner, новоиспечённого блока div, общему количеству элементов с классом .slide.
Блок 9: Вставка #slideInner в DOM используя метод .wrapAll()
$(‘#slideInner’).css(‘width’, slideWidth * numberOfSlides);
Утилизируем слайды при помощи JavaScript
Если JavaScript включён, мы хотим расположить слайды друг за другом. Также каждому из низ мы зададим фиксированную ширину в 560px – таков и будет размер нашего слайдера.
Мы можем совместить метод .css с методом .wrapAll(), который мы использовали в Блоке 8.
Блок 10: Присвоение .slide блокам overflow:hidden
slides .css(‘overflow’, ‘hidden’) .wrapAll(”)
Вставка стрелок в DOM
Мы вставим необходимые элементы, посредством манипулирования элементами DOM; таким образом, обеспечим пользователям, которые отключают JavaScript и другим устройствам простую картинку без всякого функционала. Так у них не появится никаких лишних вопросов.
Реализуем мы это при помощи методов .prepend() и .append(), которые предназначены для вставки HTML фрагментов внутри выбранных элементов (в нашем случае, это блок с id #slideshow). Текст внутри данных элементов не имеет никакого значения, т.к. он будет скрыт.
Блок 11: Вставка элементов контроля в DOM
$(‘#slideshow’) .prepend(‘Moves left’) .append(‘Moves right’);
Управления стрелками посредством функций
Для того чтобы иметь возможность управлять элементами контроля, мы создадим функцию с именем manageControls, которая скрывает и показывает правую и левую стрелку в зависимости от того, в какой части слайдера мы сейчас находимся.
Если мы смотрим первый слайд, то нам необходимо, по понятным причинам, спрятать левую стрелку. Когда мы будем на правом слайде, то нам нет никакого резона отображать правую стрелку нашего слайдера. Показ и скрытие данных элементов мы осуществим при помощи jQuery методов .hide() и .show(), которые предназначены специально для подобных целей.
Блок 12: функция manageControls()
function manageControls(position){ // position==0 если это первый слайдер if(position==0) { $(‘#leftControl’).hide(); } else { $(‘#leftControl’).show(); } // numberOfSlides-1 если последний if(position==numberOfSlides-1) { $(‘#rightControl’).hide(); } else { $(‘#rightControl’).show(); } }
Вызываем manageControls(), когда DOM готов
Когда наш скрипт окончательно загрузится, мы должны вызывать метод manageControls(), для того чтобы спрятать левую стрелку контроля. Это просто, мы передаём аргумент currentPosition, который должен быть равен 0.
Блок 13: вызов manageControls() при полной загрузке документа
manageControls(currentPosition);
Отлавливаем события
Всё что нам осталось сделать для нашего jQuery слайдера, так это создать функционал для отлавливания кликов по элементам контроля. Этот функционал будет активироваться в том случае, если пользователь нажмёт на одну из стрелок: правую или левую.
Блок 14: Отлавливаем клик на класс .control
$(‘.control’).bind(‘click’, function(){ // сделать что-то при клике });
Обновляем значение для currentPosition
Когда пользователь кликнет на элементы управления, то нам необходимо обновить значение переменной currentPosition: Если пользователь нажмёт на правую стрелку (с ID #rightControl), тогда нам нужно увеличить значение currentPosition; если пользователь кликнет на левую стрелку (с ID #lefControl), то нам надо отнять 1 из currentPosition. То, что вы увидите ниже, это тернарный оператор, который часто может здорово заменить условное выражение if/else.
Блок 15: Новое значение для currentPosition
currentPosition = ($(this).attr(‘id’)==’rightControl’) ? currentPosition+1 : currentPosition-1;
Вызов manageControls() после обновления значения currentPosition
После того, как мы определи значение переменной currentPosition, снова вызываем manageControls(), для того чтобы скрыть и отобразить инструменты контроля над слайдами.
Блок 16: Вызов manageControls() внутри метода .bind
manageControls(currentPosition);
Анимируем слайды
В конце мы переносим #slideInner влево или вправо, анимируя значение CSS свойства margin-left. Левый внешний отступ содержит отрицательное значение. К примеру, если мы сменяемся на третий слайд, то тогда наш левый отступ будет равен -1120px.
Блок 17: Используем метод .animate при смене CSS свойства margin-left
$(‘#slideInner’).animate({ ‘marginLeft’ : slideWidth*(-currentPosition) });
Заключение
В этом уроке, мы создали простой слайдер при помощи HTML, CSS, и JavaScript (jQuery). Также мы использовали специальные техники, которые позволят слайдеру работать с отключёнными CSS и JavaScript. Спасибо за внимание.
JQuery. Простой слайдер с кнопками «Вперед» и «Назад»
К простому слайдеру, созданному ранее, нужно добавить кнопки «вперед» и «назад».
Для этого нужно дополнить написанный ранее код.
HTML код для нового слайдера
Вся структура слайдера останется прежней. К разметке добавятся два контейнера, которые будут выполнять функцию кнопок.
Стили слайдера
Кнопки займут свое место благодаря абсолютному позиционированию относительно контейнера .slider-box
.slider-box{ position:relative; width:320px; height:210px; overflow:hidden;
}
.slider{ position:relative; width:10000px; height:210px;
}
.slider img{ float:left;
}
.slider-box .prev, .slider-box .next{ position:absolute; top:100px; display:block; width:29px; height:29px; cursor:pointer;
}
.slider-box .prev{ left:10px; background:url(../images/slider_controls.png) no-repeat 0 0;
}
.slider-box .next{ right:10px; background:url(../images/slider_controls.png) no-repeat -29px 0;
}
Скрипт
Слайдер прокручивается автоматически. По умолчанию движение идет слева направо, но при необходимости можно изменить направление его движения при помощи переменной course. При изменении значения переменной с 1 на -1, произойдет изменение направления движения слайдера.
Изображения в слайдере не должны меняться когда курсор находится в пределах слайдера. Для чего это делается? Все просто. Если курсор мыши расположен на слайдере, значит, посетитель сайта заинтересовался его содержимым. В это время не стоит менять слайды автоматически.
$(function() { var slider = $(‘.slider’), sliderContent = slider.html(), // Содержимое слайдера slideWidth = $(‘.slider-box’).outerWidth(), // Ширина слайдера slideCount = $(‘.slider img’).length, // Количество слайдов prev = $(‘.slider-box .prev’), // Кнопка «назад» next = $(‘.slider-box .next’), // Кнопка «вперед» sliderInterval = 3300, // Интервал смены слайдов animateTime = 1000, // Время смены слайдов course = 1, // Направление движения слайдера (1 или -1) margin = — slideWidth; // Первоначальное смещение слайдов
$(‘.slider img:last’).clone().prependTo(‘.slider’); // Копия последнего слайда помещается в начало. $(‘.slider img’).eq(1).clone().appendTo(‘.slider’); // Копия первого слайда помещается в конец. $(‘.slider’).css(‘margin-left’, -slideWidth); // Контейнер .slider сдвигается влево на ширину одного слайда.
function nextSlide(){ // Запускается функция animation(), выполняющая смену слайдов. interval = window.setInterval(animate, sliderInterval); }
function animate(){ if (margin==-slideCount*slideWidth-slideWidth){ // Если слайдер дошел до конца slider.css({‘marginLeft’:-slideWidth}); // то блок .slider возвращается в начальное положение margin=-slideWidth*2; }else if(margin==0 && course==-1){ // Если слайдер находится в начале и нажата кнопка «назад» slider.css({‘marginLeft’:-slideWidth*slideCount});// то блок .slider перемещается в конечное положение margin=-slideWidth*slideCount+slideWidth; }else{ // Если условия выше не сработали, margin = margin — slideWidth*(course); // значение margin устанавливается для показа следующего слайда } slider.animate({‘marginLeft’:margin},animateTime); // Блок .slider смещается влево на 1 слайд. }
function sliderStop(){ // Функция преостанавливающая работу слайдера window.clearInterval(interval); }
prev.click(function() { // Нажата кнопка «назад» if (slider.is(‘:animated’)) { return false; } // Если не происходит анимация var course2 = course; // Временная переменная для хранения значения course course = -1; // Устанавливается направление слайдера справа налево animate(); // Вызов функции animate() course = course2 ; // Переменная course принимает первоначальное значение }); next.click(function() { // Нажата кнопка «назад» if (slider.is(‘:animated’)) { return false; } // Если не происходит анимация var course2 = course; // Временная переменная для хранения значения course course = 1; // Устанавливается направление слайдера справа налево animate(); // Вызов функции animate() course = course2 ; // Переменная course принимает первоначальное значение });
slider.add(next).add(prev).hover(function() { // Если курсор мыши в пределах слайдера sliderStop(); // Вызывается функция sliderStop() для приостановки работы слайдера }, nextSlide); // Когда курсор уходит со слайдера, анимация возобновляется.
nextSlide(); // Вызов функции nextSlide()
});
Получился такой слайдер с кнопками «вперед» и «назад»
Следующим шагом будет добавление к слайдеру кнопок управления
>> JQuery. Простой слайдер (1/3)
>> JQuery. Простой слайдер с кнопками управления (3/3)
Устанавливаем на сайт слайдер изображений
Таким образом, к ранее подключенному файлу main.css добавлено еще пять, а именно:
- файл стилей слайдера flexslider.css;
- библиотека jQuery jquery-3.1.1.min.js;
- плагин jquery_easing;
- основной файл слайдера jquery.flexslider.js;
- скрипт слайдера flexslider_script.js.
И теперь можно перейти к непосредственному размещению слайдера на сайт.
Естественно, чтобы Fexslider смог нормально функционировать, ему необходимы сами слайды, т.е. картинки изображений которые будут поочередно появляться на его экране.
Каким образом можно получить картинки подробно рассматривалось в статье Делаем эскиз и готовим картинки для дизайн-макета.
Здесь нужно лишь добавить, что для того, что эти картинки не воспринимались поисковыми системами, как копии с других сайтов, следует их обработать с помощью графического редактора. Как вариант, можно обрезать лишние фрагменты и сохранить их сжав до определенной величины в формате jpg.
В любом случае, перед тем, как размещать картинки на сайте необходимо сделать проверку их на уникальность. Это можно сделать, использовав, например, программу «Etxt Антиплагиат».
Совет
Это довольно удобный инструмент, которым можно проверять на уникальность все документы, как изображения, так и тексты. Также здесь можно искать сайты недобросовестных владельцев, которые занимаются воровством авторских статей с наших сайтов. Что довольно актуально в наше время.
Скачать программу можно на официальном сайтеeTXT.RU. Там же можно воспользоваться и On-line проверкой.
скриншот 26
Ниже показан скриншот программы, где видны результаты проверки одной из картинок, которые были получены для данного слайдера.
Рис.4
Далее перейдем к размещению самого Fexslider.
Ранее при формировании сайта было предусмотрено для слайдера место в блоке ротатора, который при создании динамических страниц был выделен в отдельный файл с именем section.php. Поэтому слайдер мы будем вставлять в этот блок вместо картинки, которая временно его заменяла.
Для этого создадим блок с классом flexslider, в котором и будем размещать его слайды. При этом они будут располагаться по порядку в маркированном списке
В итоге, HTML-код получился довольно простой, состоящий из однотипных блоков. Ниже показано, как теперь будет выглядеть блок ротатора с соответствующими дополнениями с десятью слайдами.
- ···
- Хотите защитить автомобиль от угона?
- Не многие знают, что самый простой и эффективный способ … —
Здесь следует отметить, что в строке 4 в блоке с классом flexslider добавлен атрибут id со значением brd-slider. Это необходимо для того, чтобы с помощью стилей CSS добавить с экрану слайдера бордюры, подобно тому, как это было на временной картинке.
Это можно сделать и в таблице CSS самого слайдера flexslider.css. Но мы не будем вносить в него никакие изменения, а добавим необходимые для этого стили в общей таблице main.css.
Ниже представлен фрагмент main.css со всеми дополнениями, касающимися слайдера.
- .rtr-screen {
- margin:6.89% 6.89% 6.89% 6.89%;
- }
- #brd-slider {
- border-top:6px solid #888;
- border-left:6px solid #888;
- border-bottom:6px solid #fff;
- border-right:6px solid #fff;
- }
- .slides img {
- width:100%;
- border-radius:4px;
- }
Как видно, дополнения в таблице стилей оказались совсем небольшие. На этом размещения слайдера закончено и можно переходить к его настройкам.
Для настройка слайдера необходимо в первую очередь в файле flexslider_script.js написать код для работы с библиотекой jQuery.
При помощи этой библиотеки мы будем обращаться к элементу document, описывающему функции, которые будем использовать при работе со слайдером.
Вообще в сети имеется достаточно много справочной литературы, как непосредственно по языку JavaScript, так и по библиотеке jQuery. Например, на сайте jQuery.page2page.
ru можно найти довольно полное и подробное описание всех основных функций библиотеки jQuery. Это только один пример из достаточно большого количества вариантов.
Поэтому при желании можно ознакомиться с этими языками, хотя бы на минимальном уровне, который позволит в общих чертах ориентироваться в содержании их кодов.
Ниже показан код для работы с библиотекой jQuery, где можно увидеть включённый метод ready, обеспечивающий выполнение функций только после загрузки всей HTML-страницы. Это необходимо для корректной работы слайдера, чтобы избежать случаев запуска его при еще не загруженной до конца страницы.
- $(document).ready(function() {
- });
Теперь мы можем написать функцию вызова обработки слайдера. Делается это с использованием выражения, с помощью которого в начале находится элемент с классом flexslider, а затем вызывается метод flexslider, что будет соответствовать запуску слайдера. Этот код будет выглядеть следующим образом:
- $(document).ready(function() {
- $(‘.flexslider’).flexslider();
- });
Если сейчас обновить браузер, то можно увидеть работу слайдера с настройками по умолчанию. В этом случае замена картинок будет происходить с плавным изменением прозрачности.
С помощью настроек скрипта flexslider_script.js можно устанавливать различные режимы слайдера. Например, сделать смену картинок их прокручиванием сверху в низ.
Ниже показан код скрипта с такими настройками. Здесь также можно увидеть и другие настройки (включая закомментированные) с пояснениями их назначений.
- $(document).ready(function() {
- $(‘.flexslider’).flexslider({
- slideshow: true, //Автоматический запуск слайдера
- animation: «slide», //Тип анимации: «slide» или «fade»
- direction: «vertical», //Направление прокрутки слайдера
- reverse: false, //Реверс направления анимации
- slideshowSpeed: 4000, //Время смены кадров (миллисекунды)
- animationSpeed: 1500, //Скорость анимации (миллисекунды)
- pauseOnHover: true, //Остановка слайдера при наведении мышки на экран
- directionNav: true, //Использование кнопок вперед/назад
- //initDelay: 3000, //Задержка запуска слайдера
- //randomize: false, //Показ в случайном порядке
- //pauseOnAction: true, //Остановка при наведении на элементы управления
- //controlNav: false, //Отключение кнопок навигации
- //pausePlay: true, //Отключение кнопки play/pause
- //playText: «Play», //Текст для кнопки Play
- //pauseText: «Pause», //Текст для кнопки Pause
- });
- });
Таким образом, используя данные настройки можно использовать слайдер в различных режимах работы. Как отмечалось ранее, здесь приведена только часть настроек. Поэтому, если кому этого будет недостаточно, то остальные варианты можно посмотреть в документации, размещенной на официальном сайте.
На этом можно закончить установку слайдера. Как выглядит его работа при настройках, которые были здесь сделаны, можно посмотреть на сайте «avtobezugona.ru» по приведенной ниже ссылке.
В следующей статье займемся вопросом создания фавикона, что позволит приобрести нашему сайту еще большую индивидуальность.
Обратите внимание
Исходные файлы сайта с обновлениями, которые были сделаны в данной статье, можно скачать из прилагаемых дополнительных материалов.
Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.
Для скачивания исходных файлов необходимо авторизоваться под своим аккаунтом через соответствующую форму.
Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.
С уважением, Николай Гришин
