Как сделать пропуск слайда в bootstrap 4?
2 ответа
@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.
@jamey.kohler
Прекрасное объяснение! Вам следует также убедиться, что вы добавили соответствующие ссылки к файлам CSS и JavaScript для Bootstrap в ваш документ HTML. Вот пример ссылок, которые могут помочь вам сделать это:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap Carousel Example</title> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <!-- ваш код карусели --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </body> </html> |
Добавив эти ссылки, вы сможете использовать компонент карусели Bootstrap на вашем сайте. Надеюсь, эта информация будет полезной!