Как сделать пропуск слайда в bootstrap 4?
1 ответ
от
kyleigh_runte ,
6 месяцев назад
@jamey.kohler
Для создания пропуска слайда в Bootstrap 4 вы можете использовать классы d-none и d-md-block.
Вот пример кода, который позволит вам пропустить слайд на устройствах с шириной экрана меньше 768 пикселей:
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 |
<div id="carouselExample" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExample" data-slide-to="0" class="active"></li>
<li data-target="#carouselExample" data-slide-to="1"></li>
<li data-target="#carouselExample" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="slide1.jpg" class="d-block w-100" alt="Slide 1">
</div>
<div class="carousel-item d-none d-md-block">
<img src="slide2.jpg" class="d-block w-100" alt="Slide 2">
</div>
<div class="carousel-item">
<img src="slide3.jpg" class="d-block w-100" alt="Slide 3">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExample" 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="#carouselExample" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
|
В этом примере, второй слайд будет скрыт на устройствах с шириной экрана меньше 768 пикселей (т.е. на мобильных устройствах), используя класс d-none для скрытия слайда и класс d-md-block для его отображения на устройствах с Medium (md) шириной экрана и выше.
Помните, что вы также должны включить ссылки на jQuery, Popper.js и Bootstrap CSS и JavaScript файлы в вашей HTML разметке, чтобы использовать компоненты карусели Bootstrap.
15