| Kosten | Суббота, 02 Июня 2018, 01:14 | Сообщение 1 |
| Сейчас на современном браузере трудно представить простой слайдер, так как он должен быть обязательно адаптивный под все мобильные экраны и безусловно на большие мониторы. Здесь слайдер проверен и был ранее размешен, что теперь как уже сказано, проверен и будет предоставлено Demo под материал. Что по первому слайдеру, то можете посмотреть, возможно есть отличие, хотя по функциональности все как нужно сделано.
Только на первом сразу собран, здесь все функций разбиты и больше идет для понимания, какой элемент отвечает за функционал и как работает. После того, как ученики и посетители сайта видят отзывчивый CSS3 Image Slider, один из их первых вопросов обычно «как я могу добавить заголовок для каждого изображения.
Решение довольно просто, особенно если вы используете семантическую разметку HTML5. Поскольку это уже использует базовый код, я не буду повторять объяснение самой анимации, которую вы можете прочитать в оригинальной статье. Вместо этого я сосредоточусь на том, как стилизовать и использовать новые элементы.
По сравнению с исходным примером, разметка отражает тот факт, что каждое изображение теперь окружено figure элементом:
Приступаем к установке:
HTML
Код <div id="captioned-gallery"> <figure class="slider"> <figure> <img src="http://zornet.ru/_fr/64/6492235.jpg" alt> <figcaption>Мини профиль для uCoz</figcaption> </figure> <figure> <img src="http://zornet.ru/_fr/64/6046443.jpg" alt> <figcaption>Меню для сайта uCoz</figcaption> </figure> <figure> <img src="http://zornet.ru/_fr/64/2211561.jpg" alt> <figcaption>Ajax окна для uCuz</figcaption> </figure> <figure> <img src="http://zornet.ru/_fr/64/1112073.jpg" alt> <figcaption>Скрипты для uCoz<</figcaption> </figure> <figure> <img src="http://zornet.ru/_fr/64/9298442.jpg" alt> <figcaption>Шаблоны для uCoz</figcaption> </figure> </figure> </div>
Намеренно оставил alt атрибут пустым в этом случае, чтобы сохранить его в пространстве, но вы должны ввести соответствующее описание для доступности.
CSS
Эти figure элементы эффективно занять место изображения в оригинальном слайдере, как показаны в CSS и без префиксов поставщика, чтобы сэкономить место.
Код div#captioned-gallery {
width: 100%;
overflow: hidden;
}
figure { margin: 0; }
figure.slider {
position: relative;
width: 500%;
font-size: 0;
animation: 40s slidy infinite;
}
figure.slider figure {
width: 20%;
height: auto;
display: inline-block;
position: inherit;
}
Элемент font-size и margin настроены на то, чтобы высасывать весь воздух из родительского figure элемента и его детей, которые размещаются бок о бок, применяя display: inline-block. Те же самые дети наследуют относительное позиционирование от своего родителя, которое пригодится всего за минуту.
Код figure.slider img {
width: 100%;
height: auto;
}
figure.slider figure figcaption {
position: absolute;
bottom: 0;
background: rgba(0,0,0,0.3);
color: #fff;
width: 100%;
font-size: 2rem;
padding: .6rem;
}
Использован старый трюк позиционирования абсолютного элемента внутри относительного контейнера, чтобы гарантировать, что каждый заголовок всегда находится в нижней части связанного с ним изображения. font-size сбрасывается, а заголовок дает цвет и rgbaфон, чтобы текст всегда оставался читаемым, независимо от того, какая фотография стоит за ним.
Создание отзывчивой надписи
Хотя изображения реагируют, текст подписи отсутствует.
Существует три способа борьбы с этим:
1. Размер текста в vw единицах, а не rem или em.
2. Измените размер текста на соответствующих контрольных точках с помощью @media запросов.
3. Используйте @media запрос, чтобы скрыть подписи целиком, когда область просмотра слишком мала.
В этом случае я выбрал второй вариант:
Код @media screen and (max-width: 500px) {
figure.slider figure figcaption {
font-size: 1.2rem;
}
}
Вариации:
Кроме того, вы можете установить титры невидимым по умолчанию, по крайней мере, до тех пор, пока пользователь не зависнет над изображением:
Код figure.slider figure figcaption {
position: absolute;
bottom: -3.5rem;
background: rgba(0,0,0,0.3);
color: #fff;
width: 100%;
font-size: 2rem;
padding: .6rem;
transition: .5s bottom;
}
figure.slider figure:hover figcaption {
bottom: 0;
}
Это поднимет заголовок снизу каждого изображения. Тем не менее, когда ползунок перемещается к следующему изображению, figcaption для него было бы еще не активирована. Чтобы решить эту проблему, мы можем сделать аналогичную декларацию с помощью смежного селектора:
Код figure.slider figure:hover + figure figcaption {
bottom: 0;
}
На этом установка закончена.
Демонстрация
| | Страна: (RU) |
| |
