Компонент карусель у Bootstrap дозволяє додавати зображення, що прокручуються, і текст, які з'являються, зупиняються, а потім йдуть. Елементи керування дозволяють користувачеві прокручувати вперед або назад у межах набору. В цілому, це рядок, що біжить з елементами управління.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div id="myCarousel" class="carousel slide w-50 ml-auto mr-auto" data-ride="carousel"> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img class="d-block w-100" src="/example/image/27m.jpg" alt="Перший слайд"></div> <div class="carousel-item"> <img class="d-block w-100" src="/example/image/28m.jpg" alt="Другий слайд"></div> <div class="carousel-item"> <img class="d-block w-100" src="/example/image/30m.jpg" alt="Третій слайд"></div></div></div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> Пояснення
Щоб створити типову карусель:
- застосовуйте .carousel та .slide до зовнішнього контейнера (зі своїм власним ідентифікатором);
- зміст, що прокручується, помістіть у .carousel-inner і привласніть кожному елементу клас .carousel-item;
- крім того, ви повинні застосувати .active до одного зі слайдів у каруселі, інакше карусель не буде видно. Цей клас дозволяє встановити один слайд як початковий.
Додати елементи керування
Щоб додати елементи керування «Попередній/Наступний», використовуйте елемент <a> з класом .carousel-control-prev або carousel-control-next . Також додайте <span> з .carousel-control-prev-icon або .carousel-control-next-icon.
Щоб націлитись на програми читання з екрана, додайте <span> з словами «Попередній» або «Наступний» та надайте їм клас .sr-only. Він приховає текст у браузерах, але залишить доступним для читання з екрана.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div id="myCarousel" class="carousel slide bg-inverse w-50 ml-auto mr-auto" data-ride="carousel"> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img class="d-block w-100" src="/example/image/30m.jpg" alt="Перший слайд"></div> <div class="carousel-item"> <img class="d-block w-100" src="/example/image/28m.jpg" alt="Другий слайд"></div> <div class="carousel-item"> <img class="d-block w-100" src="/example/image/27m.jpg" alt="Третій слайд"></div></div> <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Попередній</span></a> <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Наступний</span></a></div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> Розміри каруселі
Зверніть увагу, що в цих прикладах я додав кілька додаткових класів Bootstrap для зміни розміру зображень та центрування каруселі. Зокрема, я додав w-50 ml-auto mr-auto до каруселі та w-100 до зображень. Це дає каруселі ширину 50%, а також лівий та правий margin як auto. Зображення отримують ширину 100% (тобто 100 відсотків від ширини каруселі).
Коли я так не роблю, елементи управління можуть виходити за межі зображення і ставати невидимими, тому що ширина зображення вже, ніж сама карусель, а елементи керування та фон є білими (т.е. білі на білому).
Отже, якщо ви виявили, що не бачите елементи керування на каруселі, переконайтеся, що вони не виходять за межі зображення. Залежно від зображень та контексту, в якому вони відображаються, знадобиться змінити розмір зображень або каруселі. внизу по центру), вставте список з .carousel-indicators, а також відповідні атрибути data-target та data-slide-to.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div id="myCarousel" class="carousel slide bg-inverse w-50 ml-auto mr-auto" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li></ol> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img class="d-block w-100" src="/example/image/23m.jpg" alt="Перший слайд"></div> <div class="carousel-item"> <img class="d-block w-100" src="/example/image/22m.jpg" alt="Другий слайд"></div> <div class="carousel-item"> <img class="d-block w-100" src="/example/image/32m.jpg" alt="Третій слайд"></div></div> <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Попередній</span></a> <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Наступний</span></a></div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> Підписи
Ви можете включити підписи до свого слайд-шоу, додавши <div> з класом .carousel-caption. Він входить до кожного .carousel-item.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div id="myCarousel" class="carousel slide bg-inverse w-50 ml-auto mr-auto" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li></ol> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img class="d-block w-100" src="/example/image/22m.jpg" alt="Перший слайд"> <div class="carousel-caption"> <h3>Перший слайд</h3> <p>Це перший слайд.</p></div></div> <div class="carousel-item"> <img class="d-block w-100" src="/example/image/23m.jpg" alt="Другий слайд"> <div class="carousel-caption"> <h3>Другий слайд</h3> <p>Це другий слайд.</p></div></div> <div class="carousel-item"> <img class="d-block w-100" src="/example/image/26m.jpg" alt="Третій слайд"> <div class="carousel-caption"> <h3>Третій слайд</h3> <p>Це третій слайд.</p></div></div></div> <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Попередній</span></a> <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Наступний</span></a></div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> Bootstrap 4 проти Bootstrap 3
Bootstrap 3 використовує .item для кожного елемента каруселі, Bootstrap 4 використовує .carousel-item для кожного елемента каруселі.
