Как сделать чтобы слайдер был только на главной

Закрыть ... [X]

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

Слайдеры, как правило делаются с использованием Javascript. Обычно для этого задействуют библиотеку JQuery. Хотя CSS и не позволяет создать полнофункциональный слайдер с кучей возможностей, таких как анимация по таймеру, листание пальцем на тач-скрине и т.п., во многих случаях такие продвинутые возможности и не требуются.

Простой слайдер для блога гораздо проще сверстать на чистом HTML и CSS, чем задействовать для этого возможности Javascript. Во-первых, код стилей слайдера получится гораздо проще и понятнее, чем код слайдера на Javascript. Во-вторых, та часть пользователей, которая параноидально не доверяет сайтам и заходит на незнакомые сайты только с аддоном NoScript, вырезающим весь JS-код, тоже сможет воспользоваться вашим слайдером.

Поехали!

Простой слайдер с анимированным переключением кадров

Примечание: В этом примере я буду ориентироваться на самые новые возможности CSS. Код не предназначен для работы в старых браузерах.

Начнём создание слайдера с такого кода:

<div class='sliderA'> <input type="radio" name="slider1" id="slider1_1" checked="checked"> <label for="slider1_1"></label> <div></div> <input type="radio" name="slider1" id="slider1_2"> <label for="slider1_2"></label> <div></div> <input type="radio" name="slider1" id="slider1_3"> <label for="slider1_3"></label> <div></div> <input type="radio" name="slider1" id="slider1_4"> <label for="slider1_4"></label> <div></div> </div>

Контейнер слайдера — div с классом sliderA. Каждый кадр слайдера описывается трёмя тегами:

Радиокнопкой (input type="radio"), отвечающей за состояние данного кадра (видно / не видно) Меткой label, отвечающей за отображение кнопки перехода на данный слайдер. Тегом div в котором находится содержимое кадра.

Радиокнопки внутри одного слайдера должны иметь одинаковое имя name. Также, все радиокнопки должны иметь уникальные (различные) идентификаторы id. Метка в поле for должна содержать значение id соответствующей радиокнопки. (Если вам не понятно, почему и зачем всё это делается читайте статью про вкладки. Там всё это объяснено подробно.)

Начинаем работать над стилями. Контейнер:

.sliderA { width: 400px; height: 250px; border: 1px solid #888; position: relative; text-align: center; }

Мы задаём фиксированные размеры контейнера. Я установил их равными размеру изображений, которые я буду использовать в этом примере. Свойство position: relative необходимо, чтобы задать новую точку отсчёта позиций вложенных контейнеров. Свойство text-align: center я добавил, чтобы выровнять по центру полосу меток-кнопок, которые я буду позиционировать как inline-элементы.

Отображение радиокнопок нам не нужно, скрываем их:

.sliderA > input { display: none; }

Оформляем метки-кнопки. Кода много, но ничего сложного нет:

.sliderA > input + label { display: inline-block; width: 10px; height: 10px; border-radius: 8px; background: rgba(90, 90, 90, 0.8); border: 2px solid rgba(190, 190, 190, 0.8); cursor: pointer; z-index: 100; position: relative; margin-right: 4px; top: 90%; transition: background 0.8s ease-out 0s; } .sliderA > input + label:hover { background: rgba(250, 250, 250, 0.8); } .sliderA > input:checked + label { background: rgba(220, 220, 220, 0.8); }

Я устанавливаю свойство display: inline-block, что позволит разместить метки одной строкой и выровнять их по центру как строчные элементы, и вместе с тем задать им фиксированные размеры как блокам. Затем я задаю ширину и высоту, а также радиус скругления углов, цвет фона и цвет границы. Всё это приводит к тому, что наши метки будут отображаться в виде маленьких круглых кнопок.

Свойство cursor позволяет задать внешний вид курсора мыши при наведении на кнопку. Я установил значение pointer, т.е. вид указателя мыши будет такой же, как при наведении на ссылку («указательный палец»).

Свойство z-index необходимо для того, чтобы метки-кнопки лежали поверх кадров слайдера. Для этого же установлено свойство position: relative — иначе z-index не будет работать.

margin-right добавляет отступы между кнопками, а top: 90% сдвигает их в нижнюю часть контейнера. Можно было задать вертикальную позицию кнопок более грамотно, но здесь я ограничусь этим способом.

Также я задаю цвет фона для нажатой кнопки и кнопки, на которую наведена мышь. Свойство transition определяет анимацию для смены фона.

Также нам следовало устранить все пробелы и переводы строк между тегами слайдера, так как при использовании display: inline-block они дадут нам лишние зазоры между кнопками. Так мы поступали в предыдущей статье. Я не стал сейчас этого делать для упрощения восприятия кода HTML.

Получилась вот такая заготовка слайдера:

Добавляем стили для div-ов, в которых будет находиться содержимое кадра:

.sliderA > div { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 0; }

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

Вот такой код у меня получился:

.sliderA > div { visibility: hidden; opacity: 0; transition: opacity 0.8s ease-out 0.1s, visibility 0.1s ease-out 0.9s; } .sliderA > input:checked + label + div { visibility: visible; opacity: 1; transition: opacity 0.8s ease-out 0.1s, visibility 0.1s ease-out 0s; } Также я добавил правило для тега p внутри кадра, чтобы сделать подписи к картинкам: .sliderA > div > p { position: absolute; top: 0px; left: 0px; right: 0px; text-align: center; color: #fff; text-shadow: 1px 1px 2px #000; }

Дописываем HTML-код слайдера для нашего примера:

<div class='sliderA'> <input type="radio" name="slider1" id="slider1_1" checked="checked"> <label for="slider1_1"></label> <div> <p>Восход над островом</p> <img src='https://lh3.googleusercontent.com/-XGgw41OSARk/VePicTdAdgI/AAAAAAAAAS4/WeBbxp4ebQg/s400-Ic42/00099_manaisland_1920x1200.jpg' alt=''> </div> <input type="radio" name="slider1" id="slider1_2"> <label for="slider1_2"></label> <div> <p>Озёрный край</p> <img src='https://lh3.googleusercontent.com/-aafAKIoTkT4/VePihWk2BHI/AAAAAAAAATA/zQVtiYD_eDc/s400-Ic42/00201_lakejipe_1920x1200.jpg' alt=''> </div> <input type="radio" name="slider1" id="slider1_3"> <label for="slider1_3"></label> <div> <p>Закатная синева</p> <img src='https://lh3.googleusercontent.com/-ikbDMRhLc_I/VePkT4XLFtI/AAAAAAAAATg/qaHqQk89RAw/s400-Ic42/00744_laclahachesunset_1920x1200.jpg' alt=''> </div> <input type="radio" name="slider1" id="slider1_4"> <label for="slider1_4"></label> <div> <p>Сельский пейзаж</p> <img src='https://lh3.googleusercontent.com/-BLXeHJNyOqw/VePimp_e_wI/AAAAAAAAATQ/BVw_9LFehyU/s400-Ic42/00442_pyrenees_1920x1200.jpg' alt=''> </div> </div>

И получаем вот такой результат:

Восход над островом

Озёрный край

Закатная синева

Сельский пейзаж

Простой слайдер с анимированным переключением кадров, второй вариант

В слайдере можно размещать как обычные фотографии, так и любой текст, ссылки на другие страницы сайта и так далее.

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

Усовершествуем наш слайдер. В шаблон слайдера добавим по еще одной метке для каждого кадра:

<div class='sliderA' > <input type="radio" name="slider2" id="slider2_1" checked="checked"> <label for="slider2_1"></label> <div></div> <label for="slider2_2"></label> <input type="radio" name="slider2" id="slider2_2"> <label for="slider2_2"></label> <div></div> <label for="slider2_3"></label> <input type="radio" name="slider2" id="slider2_3"> <label for="slider2_3"></label> <div></div> <label for="slider2_4"></label> <input type="radio" name="slider2" id="slider2_4"> <label for="slider2_4"></label> <div></div> <label for="slider2_1"></label> </div>

Как видите, метка идущая после первого кадра, активирует второй кадр. Метка, расположенная после второго кадра, активирует третий кадр; после третьего — чертвёртый. Последняя метка активирует первый кадр.

Метки мы расположим так, чтобы они перекрывали весь слайдер и лежали выше изображения, но ниже полосы кнопок. Метки прозрачные, поэтому сквозь них видно содержимое кадра. При показе кадра номер N вместе с ним отображается метка для перехода на кадр N + 1. (Для последнего кадра — метка перехода на первый кадр.)

.sliderA > input + label + div + label { display: none; } .sliderA > input:checked + label + div + label { display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 50; }

Таким образом, при щелчке по изображению срабатывает активация следующего изображения. Результат:

Восход над островом

Озёрный край

Закатная синева

Сельский пейзаж

У нас получился симпатичный слайдер для фотографий с вкладочным переключением кадров. Такой слайдер отлично подойдёт, например, для публикации фотографий в блоге о путешествиях.

В следующей статье о CSS я рассмотрю другой вариант слайдера: с переключением кадров при помощи кнопок «вперёд» и «назад».


Источник: http://www.helpful-stuff.ru/2014/08/kak-sdelat-slider-na-css.html?m=1


Поделись с друзьями



Рекомендуем посмотреть ещё:



Похожие новости


Своими руками из старого системного блока
Абсент сделать в домашних условиях
Костюм для барби своими руками
Как сделать одежды для кошек своими руками
Как сделать домашние сухари
Майнкрафт как сделать бункер
Реабилитация после акш в домашних условиях
Идеи для комнат своими руками фото


Как сделать чтобы слайдер был только на главной
Как сделать чтобы слайдер был только на главной


Делаем JS слайдер своими руками
Javascript - Как сделать так, чтобы крайние элементы слайдера были



ШОКИРУЮЩИЕ НОВОСТИ