Установим плагин слайдера bootstrap carousel, подключим к проекту.
Сделаем настройку навигации стрелочками и точками для карусели.
В заключении страницу сайт сделаем адаптивный для всех экранов, чтобы карусель отображалась корректно.
Содержание статьи
Подключаем bootstrap carousel и создаем две секции.
Подключаем bootstrap 3 к проекту как в этой статье.
Делаем структуру в html для карусели.
В секцию добавим контейнер и строку row.
Как у всех секций будет заголовок h2 в двенадцати колонках col-xs-12 на всю ширину экрана.
Чуть ниже добавим карусель с изображением и описанием, для этого заходим на официальный сайт bootstrap, нажимаем в меню javascript и выбираем сбоку carousel.
Откроется окошко с исходным кодом, который целиком мы скопируем в свой проект для дальнейшего редактирования.
Под классом item active добавим первую колонку col-md-4 col-md-offset-1 с изображением.
Offset используется для отступов с боков, чтобы поместились стрелочки меню навигации.
Во вторую колонку col-md-6 пропишем все характеристики и заголовок третьего уровня.
Если мы скопируем характеристики из текстового документа в sublimetext, то для редактирования всех сразу нажмем горячую клавишу ctrl+shift+G, обернем в тег ul с элементами списка li.
У каруселе есть свои иконки для навигации, которые есть на сайте bootstrap, можно использовать свои, например, шрифт font awesome fa-angle-left.
Скопируем код от одной колонки для других и отредактируем каждую.
Код в index.html.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
<section id="manag"> <div class="container"> <div class="row"> <div class="col-xs-12"> <h2>Заголовок для карусели</h2> </div> </div> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <div class="col-md-4 col-md-offset-1 text-center"> <img src="img/p1.png" alt=""> </div> <div class="col-md-6"> <h3>Моноблок</h3> <p><small>Характеристики</small></p> <ul class="ul1"> <li>Далеко-далеко за словесными горами в стране, гласных и согласных.</li> <li>Далеко-далеко за словесными горами в стране.</li> <li>Далеко-далеко за словесными горами в стране, гласных.</li> <li>Далеко-далеко за словесными горами в стране, гласных и согласных.</li> </ul> </div> </div> <div class="item"> <div class="col-md-4 col-md-offset-1 text-center"> <img src="img/p2.png" alt="" class="wow bounce" data-wow-delay="1s"> </div> <div class="col-md-6"> <h3>Видеокамера</h3> <p><small>Характеристики</small></p> <ul class="ul1"> <li>Далеко-далеко за словесными горами в стране, гласных и согласных.</li> <li>Далеко-далеко за словесными горами в стране.</li> <li>Далеко-далеко за словесными горами в стране, гласных.</li> <li>Далеко-далеко за словесными горами в стране, гласных и согласных.</li> </ul> </div> </div> <div class="item"> <div class="col-md-4 col-md-offset-1 text-center"> <img src="img/p3.png" alt=""> </div> <div class="col-md-6"> <h3>Усилитель звука</h3> <p><small>Параметры</small></p> <ul class="ul1"> <li>Далеко-далеко за словесными горами в стране, гласных и согласных.</li> <li>Далеко-далеко за словесными горами в стране.</li> <li>Далеко-далеко за словесными горами в стране, гласных.</li> <li>Далеко-далеко за словесными горами в стране, гласных и согласных.</li> </ul> </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span aria-hidden="true"><i class="fa fa-angle-left" aria-hidden="true"></i></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span aria-hidden="true"><i class="fa fa-angle-right" aria-hidden="true"></i> </span> <span class="sr-only">Next</span> </a> </div> </div> </section> |
Карусель для landing также можно сделать с помощью плагина owl carousel 2.
Стилизуем bootstrap 3 карусель в main.sass.
- У карусели есть свой задний фон с градиентом, чтобы его отключить пропишем background-image: none для класса carousel-control.
- Для иконки fa-angle-right установим абсолютное позицианирование, чтобы установить посередине top: 50%. Зададим размеры элементу, в котором будет иконка. Фон у круга сделаем с градиентом для красоты. При наведении &:hover будет появляться тень.
- Стилизуем список с классом ul1, для элементов списка уберем отображение точек list-style: none и добавим свои иконки шрифтом font-family: fontawesome у класса &:before. Зададим код иконки в свойстве content: '\f061'. Код любой icons можно посмотреть на сайте, с помощью инспектора.
- Класс carousel-indicators отвечает за отображение навигации точками. Сделаем иконки пониже bottom: -50px под каруселью. Для каждой точки установим размеры и цвет. Чтобы выделить активную точку установим active большего размера и добавим тень.
- Отцентрируем изображения img.
Код в main.sass.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
.carousel-control.left, .carousel-control.right background-image: none .fa-angle-right, .fa-angle-left position: absolute top: 50% font-size: 2em height: 40px width: 40px background: linear-gradient(45deg, #b641b0, #1f62e9) border-radius: 50% &:hover box-shadow: 0 0 50px rgba(126,114,164,0.8) .ul1 padding-left: 0 li list-style: none margin-left: 20px &:before content: '\f061' font-family: fontawesome position: absolute width: 5px height: 5px margin-left: -20px .carousel-indicators bottom: -50px li background: linear-gradient(45deg, #b641b0, #1f62e9) width: 18px height: 18px transition: .5s .active background: linear-gradient(-135deg, #b641b0, #1f62e9) width: 20px height: 20px box-shadow: 0 0 20px rgba(126,114,164,0.9) |
Настройка навигации для bootstrap слайдера.
Когда мы скачаем код от slider bootstrap, то увидим два описания для кода первый controls для навигации стрелками, сбоку слайдера.
Второе описание indicators, под ним код для навигации точками под слайдером.
Рассмотрим каждый код навигации подробнее.
Навигация точками для первой карусели
Индикатор состоит из списка для каждого слайда карусели и каждая точка привязана к своему слайду параметром data-slide-to=n.
Код навигации точками.
|
1 2 3 4 5 6 |
<!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> |
Навигация стрелочки второй секции.
Есть два параметра навигации next или prev с классом left carousel-control и правая.
Внутри в теге span добавляем любые иконки стрелочек.
Стилизуем стрелочки в css.
Код навигации стрелками.
|
1 2 3 4 5 6 7 8 9 10 |
<!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> |
Адаптируем carousel для всех экранов.
Для мобильной версии стрелочки не подойдут.
Для разрешения max-width : 480px установим свойство display: none.
Добавим кнопку btn visible-xs для отображения на экранах телефона.
Код в media.sass.
|
1 2 3 |
@media only screen and (max-width : 480px) .carousel-control.left, .carousel-control.right display: none |
Код в Index.html для кнопки.
|
1 2 3 |
<div class="btn visible-xs"> <a href="carousel-example-generic" role="button" data-slide="next">Листать дальше</a> </div> |