Как создать слайдер карусели для вашего сайта в Bootstrap CSS.
Как создать слайдер карусели для вашего сайта в Bootstrap CSS.
В веб-дизайне карусель – это слайд-шоу для представления серии контента. Звучит безобидно, правда?
Но некоторые веб-дизайнеры любят слайдеры-карусели, а другие презирают их.
Это потому, что, если все сделано правильно, слайдер карусели может эффективно организовать серийный контент или несколько отдельных частей контента. Это также может повысить вовлеченность и улучшить взаимодействие с пользователем, позволяя посетителям быстро и легко перемещаться по этому контенту, особенно на мобильных устройствах.
Однако при неправильном использовании ползунки карусели приносят больше вреда, чем пользы. Например, автоматический слайдер может больше отвлекать, чем информативно. Слайдер с дрянной анимацией может сделать ваш сайт менее профессиональным. А плохо спроектированную карусель можно полностью не заметить, которая эффективно скрывает информацию на других слайдах от посетителей.
Чтобы избежать этих потенциальных ловушек и воспользоваться только преимуществами слайдера карусели, убедитесь, что вы понимаете,
CSS-карусель
Есть два способа создать слайдер карусели для вашего сайта. Вы можете создать его с нуля, используя только HTML и CSS. Или вы можете использовать
Ниже мы подробно рассмотрим каждый процесс и рассмотрим пример сборки карусели для каждого.
Как сделать простую карусель в
С помощью Bootstrap вы можете создать простую карусель, используя только HTML. Чтобы показать вам, как это сделать, мы разберем процесс создания карусели со слайдами и элементами управления. Он будет практически идентичен второму примеру в
Начнем с родительского элемента. Для начала вам понадобится элемент
Затем вы хотите определить элемент с помощью класса слайдов .carousel и добавить атрибут data-ride = "carousel", чтобы анимация карусели начиналась при загрузке страницы без необходимости каких-либо действий. Вот как выглядит наш HTML:
<div id="SimpleCarouselExample" class="carousel slide" data-ride="carousel"> </div> Теперь нам нужно разместить дочерние элементы внутри этого родительского элемента
<img src="..." class="d-block w-100" alt="..."> <img src="..." class="d-block w-100" alt="..."> <img src="..." class="d-block w-100" alt="..."> Обратите внимание на наличие .d-block и .w-100. Эти классы предотвращают выравнивание изображений по умолчанию в браузере. В частности, .d-block – это
Нам нужно обернуть каждое из этих изображений в элемент
<div class="carousel-item active"> <img src="..." class="d-block w-100" alt="..."> </div> Примечание. Класс .active необходимо добавить на один из слайдов. Без этого класса карусель не будет видна.
Я собираюсь обернуть все эти элементы карусели в элемент
<div class="carousel-inner"> <div class="carousel-item active"> <img src="..." class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="..." class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="..." class="d-block w-100" alt="..."> </div> </div> Теперь, когда я успешно создал карусель только со слайдами, пришло время добавить предыдущий и следующий элементы управления. Чтобы создать их, добавьте два элемента и определите их с помощью класса .carousel-control-prev-icon и класса .carousel-control-next-icon соответственно.
<span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="carousel-control-next-icon" aria-hidden="true"></span> Обратите внимание на
Некоторые пользователи, особенно те, которые используют программы чтения с экрана, не видят или не могут щелкать предыдущие и следующие значки. Вот почему вам нужно добавить еще два элемента диапазона, которые обозначают каждый значок как «Предыдущий» и «Следующий». Определите их с
<span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> Атрибут aria-hidden указывает вспомогательным технологиям пропускать DOM карусели, чтобы при просмотре этого кода они читали просто «Предыдущий» или «Следующий».
Теперь, когда мы создали значки (и альтернативный текст), нам нужно обернуть пары в элементы . Определите каждый элемент с помощью класса .carousel-control prev и .carousel-control-next соответственно.
Вам также понадобятся [href] s с тем же именем ID, что и у элемента карусели. В Bootstrap элементы управления и индикаторы должны иметь атрибут data-target (или href для ссылок), который соответствует идентификатору элемента .carousel. Вы назначите каждой из них роль кнопки и атрибут слайда данных, установленный на «предыдущий» и «следующий» соответственно. Вот как будет выглядеть HTML:
<a class="carousel-control-prev" href="#SimpleCarouselExample" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#SimpleCarouselExample" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> Собрав все вместе, вот HTML-код, который вам понадобится для создания простой карусели со слайдами и элементами управления:
<div id="SimpleCarouselExample" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="..." class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="..." class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="..." class="d-block w-100" alt="..."> </div> </div> <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> Так будет выглядеть и вести себя карусель на интерфейсе вашего сайта. Обратите внимание, что он автоматически переходит к следующему слайду, если я ничего не делаю, но позволяет мне перемещаться вперед и назад при использовании параметров управления.
Вы можете найти другие примеры каруселей в
Карусельный слайдер на чистом CSS
Прежде чем мы погрузимся в пример сборки, важно понять, что для создания слайдера карусели на чистом CSS также требуется HTML. В конце концов, CSS – это язык стилей, поэтому вам понадобится HTML, чтобы было что стилизовать.
Карусель «чистый CSS» или «только CSS» означает, что вам не понадобится JavaScript. Это хорошая новость для большинства владельцев сайтов, поскольку JavaScript – сложный язык программирования, который может быть трудно выучить и правильно использовать.
Теперь, когда у нас есть лучшее представление о терминологии и ценности мышления, ориентированного на CSS, давайте рассмотрим пример построения карусели только для CSS.
Допустим, вы хотите создать карусель с тремя слайдами. Затем вы должны создать три элемента
<div class="slides"> <div> 1 </div> <div> 2 </div> <div> 3 </div> </div> Время для CSS. Чтобы стилизовать контейнер, используйте
.slides { display: flex; } .slides > div { display: flex; } Вы можете узнать больше о том, как использовать Flexbox для создания одномерных макетов, в
Теперь мы хотим убедиться, что пользователи могут прокручивать эти слайды вручную. Для этого мы собираемся установить для свойства overflow-x контейнера значение auto. Это обеспечивает механизм прокрутки для переполненных рамок или, в данном случае, слайд-шоу. Вот CSS:
.slides { overflow-x: auto; } Затем для каждого слайда в карусели мы собираемся установить ширину 100%, чтобы он охватил всю область просмотра по горизонтали, и установим высоту 300 пикселей. Мы также собираемся установить для свойства flex-shrink значение 0, чтобы слайды не сжимались и не оборачивались на небольших устройствах. Вот CSS:
.slides > div { flex-shrink: 0; width: 100%; height: 300px; } Мы можем сделать еще несколько вещей, чтобы улучшить прокрутку. Чтобы каждый слайд «фиксировался» при прокрутке от одного к другому, мы можем добавить точки привязки с помощью свойства scroll-snap-type и свойства выравнивания привязки прокрутки. Мы также можем убедиться, что действие скольжения плавное как на настольном компьютере, так и на мобильном устройстве, с помощью свойства scroll-behavior. Вот как выглядит CSS:
.slides { scroll-snap-type: x mandatory; } .slides > div { scroll-snap-align: start; scroll-behavior: smooth; } Я просто собираюсь стилизовать свои три слайда, чтобы мы могли лучше их видеть, изменив цвет фона на синий, выровняв слайды и текст в центре контейнера и
.slides > div { background: #74ABE2; justify-content: center; align-items: center; font-size: 100px; } Все вместе вот CSS:
.slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; } .slides > div { display: flex; flex-shrink: 0; width: 100%; height: 300px; scroll-snap-align: start; scroll-behavior: smooth; background: #74ABE2; justify-content: center; align-items: center; font-size: 100px; } Вот результат:
Добавление слайдера карусели на ваш сайт
Ползунки карусели могут помочь вам эффективно использовать пространство и организовывать контент на вашем сайте, одновременно удерживая посетителей и давая им контроль над тем, как они читают ваш контент. Если они подходят для вашего сайта, вы можете использовать любой из описанных выше методов для создания слайдера карусели без Javascript. Вам просто нужно немного разбираться в HTML и CSS.
записи:
