...
WEB и WordPress новости, темы, плагины. Здесь мы делимся советами и лучшими решениями для сайтов.

Как создать слайдер карусели для вашего сайта в Bootstrap CSS

2 007

В веб-дизайне карусель – это слайд-шоу для представления серии контента. Звучит безобидно, правда?

Но некоторые веб-дизайнеры любят слайдеры-карусели, а другие презирают их.

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

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

Чтобы избежать этих потенциальных ловушек и воспользоваться только преимуществами слайдера карусели, убедитесь, что вы понимаете, что можно и чего нельзя делать с этим элементом дизайна. Важным «делом» является создание слайдера карусели с учетом доступности. Ниже мы рассмотрим два способа сделать это на своем сайте. Давайте начнем.

CSS-карусель

Есть два способа создать слайдер карусели для вашего сайта. Вы можете создать его с нуля, используя только HTML и CSS. Или вы можете использовать Bootstrap CSS, фреймворк, который предлагает заранее спроектированные компоненты, включая карусели, для ускорения процесса разработки кода.

Ниже мы подробно рассмотрим каждый процесс и рассмотрим пример сборки карусели для каждого.

Как сделать простую карусель в Bootstrap CSS

С помощью Bootstrap вы можете создать простую карусель, используя только HTML. Чтобы показать вам, как это сделать, мы разберем процесс создания карусели со слайдами и элементами управления. Он будет практически идентичен второму примеру в официальной документации Bootstrap, за исключением имени идентификатора.

Начнем с родительского элемента. Для начала вам понадобится элемент

. Обязательно дайте ему уникальное имя ID, чтобы вы могли применить дополнительные элементы управления позже. Это особенно важно, если вы добавляете несколько каруселей на одну страницу. Я назову этот пример SimpleCarouselExample.

Затем вы хотите определить элемент с помощью класса слайдов .carousel и добавить атрибут data-ride = "carousel", чтобы анимация карусели начиналась при загрузке страницы без необходимости каких-либо действий. Вот как выглядит наш HTML:

 
   <div id="SimpleCarouselExample" class="carousel slide" data-ride="carousel">
</div>
 

Теперь нам нужно разместить дочерние элементы внутри этого родительского элемента

. Допустим, нам нужно три изображения в карусели. Вот HTML для этих изображений с многоточием, выступающим в качестве заполнителя для конкретного источника изображения и альтернативного текста, который мы будем использовать.
 
   <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 – это значение свойства отображения в Bootstrap, которое делает элемент видимым на всех размерах экрана, а .w-100 – служебное значение ширины, которое делает элемент на 100% такой же ширины, как и его контейнер.

Нам нужно обернуть каждое из этих изображений в элемент

с классом .carousel-item, чтобы браузер знал, что они принадлежат карусели. Вот как это выглядит для первого изображения:
 
   <div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>

Примечание. Класс .active необходимо добавить на один из слайдов. Без этого класса карусель не будет видна.

Я собираюсь обернуть все эти элементы карусели в элемент

с классом .carousel-inner, как показано ниже:
 
   <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>

Обратите внимание на атрибуты ARIA. Мы объясним их через минуту, но сначала мы должны рассмотреть, что добавить, чтобы сделать дизайн доступным.

Некоторые пользователи, особенно те, которые используют программы чтения с экрана, не видят или не могут щелкать предыдущие и следующие значки. Вот почему вам нужно добавить еще два элемента диапазона, которые обозначают каждый значок как «Предыдущий» и «Следующий». Определите их с помощью класса .sr-only, чтобы текст был скрыт на всех устройствах, кроме программ чтения с экрана. У вас должно получиться две пары пролетов, которые выглядят следующим образом:

 
   <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>

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

Вы можете найти другие примеры каруселей в официальной документации Bootstrap.

Карусельный слайдер на чистом CSS

Прежде чем мы погрузимся в пример сборки, важно понять, что для создания слайдера карусели на чистом CSS также требуется HTML. В конце концов, CSS – это язык стилей, поэтому вам понадобится HTML, чтобы было что стилизовать.

Карусель «чистый CSS» или «только CSS» означает, что вам не понадобится JavaScript. Это хорошая новость для большинства владельцев сайтов, поскольку JavaScript – сложный язык программирования, который может быть трудно выучить и правильно использовать.

Теперь, когда у нас есть лучшее представление о терминологии и ценности мышления, ориентированного на CSS, давайте рассмотрим пример построения карусели только для CSS.

Допустим, вы хотите создать карусель с тремя слайдами. Затем вы должны создать три элемента

и заключить их в родительский элемент
с классом .slides, как показано ниже:
 
   <div class="slides">
<div> 1 </div>
<div> 2 </div>
<div> 3 </div>
</div>

Время для CSS. Чтобы стилизовать контейнер, используйте селектор CSS .slides. Для начала установите для свойства display значение «flex», чтобы сделать его гибким боксом. Убедитесь, что вы сделали то же самое со слайдами, чтобы они тоже стали гибкими элементами. Вот CSS:

 
   .slides {
display: flex;
}
.slides > div {
display: flex;
}

Вы можете узнать больше о том, как использовать Flexbox для создания одномерных макетов, в статье «Разница между Flexbox, CSS Grid и Bootstrap».

Теперь мы хотим убедиться, что пользователи могут прокручивать эти слайды вручную. Для этого мы собираемся установить для свойства 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;
}

Я просто собираюсь стилизовать свои три слайда, чтобы мы могли лучше их видеть, изменив цвет фона на синий, выровняв слайды и текст в центре контейнера и увеличив размер шрифта. Вот CSS:

 
   .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;
}

Вот результат:

Как создать слайдер карусели для вашего сайта в Bootstrap CSS

Источник

Добавление слайдера карусели на ваш сайт

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

Источник записи: https://blog.hubspot.com

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее