Добавлен: 13.02.2019
Просмотров: 5599
Скачиваний: 30
Радиокнопки внутри одного слайдера должны иметь одинаковое имя name. Также, все радиокнопки должны иметь уникальные (различные) идентификаторы id. Метка в поле for должна содержать значение id соответствующей радиокнопки.
Начинаем работать над стилями css. Контейнер:
.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 они дадут лишние зазоры между кнопками. Получилась вот такая заготовка слайдера:
Добавляем стили для блоков, в которых будет находиться содержимое кадра:
.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 анимировать оба свойства, чтобы добиться нужного нам эффекта. Суть метода в следующем:
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-код слайдера, указывая подписи и расположение изображений для всех слайдов, которые прописаны в html. Пример для одного слайда:
<input type="radio" name="slider1" id="slider1_1" checked="checked">
<label for="slider1_1"></label>
<div> <p>Надпись слайда 1</p>
<img src="Pict/image.jpg">
</div>
Важно также установить размер изображений согласно стилевым описаниям контейнера слайдера. Размерность должна быть в чётком соответствии.
Пример выполненной работы:
Слайдер с анимированным переключением кадров с помощью кнопок и нажатием на изображение
Основой данного слайдера является предыдущий слайдер с анимированным переключением кадров с помощью кнопок. Все стилевые описания остаются прежними с некоторыми добавлениями в коде.
В шаблон слайдера в html добавляется по еще одной метке для каждого кадра:
<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 с кнопками «вперёд» и «назад»
Примечание. Для ознакомления предоставляется вёрстка кнопки. В коде слайдера она прописана.
Код HTML для вёрстки кнопки:
<div id='button-example'>
<div></div>
<div></div>
</div>
CSS для вёрстки кнопки:
#button-example {
width: 400px;
height: 250px;
border: 1px solid #888;
position: relative;
overflow: hidden;
}
#button-example > div {
width: 80px;
height: 80px;
border-radius: 40px;
background-color: rgba(220, 220, 220, 0.4);
position: absolute;
top: 50%;
transform: translateY(-50%);
}
#button-example > div:after {
font-size: 30px;
color: #fff;
display: block;
position: absolute;
top: 0px;
bottom: 0px;
line-height: 80px;
}
#button-example > div:first-child {
left: -40px;
}
#button-example > div:first-child:after {
content: '◀';
left: 55%;
}
#button-example > div:last-child {
right: -40px;
}
#button-example > div:last-child:after {
content: '▶';
right: 55%;
}