Ноябрь 2017
Автор: Рубрика: Верстка Комментариев нет

Настройка bootstrap carousel на примере

Настройка bootstrap carousel

Установим плагин слайдера bootstrap carousel, подключим к проекту.

Сделаем настройку навигации стрелочками и точками для карусели.

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

Подключаем bootstrap carousel и создаем две секции.


Подключаем bootstrap 3 к проекту как в этой статье.

Делаем структуру в html для карусели.

В секцию добавим контейнер и строку row.

Как у всех секций будет заголовок h2 в двенадцати колонках col-xs-12 на всю ширину экрана.

Чуть ниже добавим карусель с изображением и описанием, для этого заходим на официальный сайт bootstrap, нажимаем в меню javascript и выбираем сбоку carousel.

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

Подключаем bootstrap carousel

Под классом item active добавим первую колонку col-md-4 col-md-offset-1 с изображением.

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

Во вторую колонку col-md-6 пропишем все характеристики и заголовок третьего уровня.

Если мы скопируем характеристики из текстового документа в sublimetext, то для редактирования всех сразу нажмем горячую клавишу ctrl+shift+G, обернем в тег ul с элементами списка li.

нажмем горячую клавишу ctrl+shift+G

У каруселе есть свои иконки для навигации, которые есть на сайте bootstrap, можно использовать свои, например, шрифт font awesome fa-angle-left.

Скопируем код от одной колонки для других и отредактируем каждую.

Код в index.html.

Карусель для landing также можно сделать с помощью плагина owl carousel 2.

Стилизуем bootstrap 3 карусель в main.sass.

  1. У карусели есть свой задний фон с градиентом, чтобы его отключить пропишем background-image: none для класса carousel-control.
  2. Для иконки fa-angle-right установим абсолютное позицианирование, чтобы установить посередине top: 50%. Зададим размеры элементу, в котором будет иконка. Фон у круга сделаем с градиентом для красоты. При наведении &:hover будет появляться тень.
  3. Стилизуем список с классом ul1, для элементов списка уберем отображение точек list-style: none и добавим свои иконки шрифтом font-family: fontawesome у класса &:before. Зададим код иконки в свойстве content: '\f061'. Код любой icons можно посмотреть на сайте, с помощью инспектора.
  4. Класс carousel-indicators отвечает за отображение навигации точками. Сделаем иконки пониже bottom: -50px под каруселью. Для каждой точки установим размеры и цвет. Чтобы выделить активную точку установим active большего размера и добавим тень.
  5. Отцентрируем изображения img.

Код в main.sass.

Стилизуем bootstrap 3 карусель

 

Настройка навигации для bootstrap слайдера.

Когда мы скачаем код от slider bootstrap, то увидим два описания для кода первый controls для навигации стрелками, сбоку слайдера.

Второе описание indicators, под ним код для навигации точками под слайдером.

Рассмотрим каждый код навигации подробнее.

Навигация точками для первой карусели

Индикатор состоит из списка для каждого слайда карусели и каждая точка привязана к своему слайду параметром data-slide-to=n.

Код навигации точками.

Навигация стрелочки второй секции.

Есть два параметра навигации next или prev с классом left carousel-control и правая.

Внутри в теге span добавляем любые иконки стрелочек.

Стилизуем стрелочки в css.

Код навигации стрелками.

Адаптируем carousel для всех экранов.

Для мобильной версии стрелочки не подойдут.

Для разрешения max-width : 480px установим свойство display: none.

Адаптируем carousel для всех экранов

Добавим кнопку btn visible-xs для отображения на экранах телефона.

Код в media.sass.

Код в Index.html для кнопки.

Комментариев нет

Комментарии:

Комментарии запрещены