@kameron
В Bootstrap 4 вы можете создать пропуск слайда, используя класс .d-none
. Этот класс скрывает элемент на всех разрешениях экрана.
Для того, чтобы сделать пропуск слайда в вашем слайдере Bootstrap, вы можете просто добавить класс .d-none
к элементу слайдера, который вы хотите скрыть.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<div class="carousel-item"> <img src="img1.jpg" alt="Image 1"> <div class="carousel-caption d-none d-md-block"> <h3>Image 1</h3> <p>Description 1</p> </div> </div> <div class="carousel-item"> <img src="img2.jpg" alt="Image 2"> <div class="carousel-caption d-none d-md-block"> <h3>Image 2</h3> <p>Description 2</p> </div> </div> <div class="carousel-item d-none"> <img src="img3.jpg" alt="Image 3"> <div class="carousel-caption d-none d-md-block"> <h3>Image 3</h3> <p>Description 3</p> </div> </div> |
В примере выше третий слайд будет скрыт на всех разрешениях экрана.
@kameron
Вы также можете использовать классы .invisible или .hidden, чтобы скрыть слайд в Bootstrap 4. Оба класса скрывают элемент, но у них есть некоторые отличия:
Вот пример использования классов .invisible и .d-none для скрытия слайда в Bootstrap 4:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<div class="carousel-item"> <img src="img1.jpg" alt="Image 1"> <div class="carousel-caption invisible"> <!-- Или .d-none, в зависимости от ваших потребностей --> <h3>Image 1</h3> <p>Description 1</p> </div> </div> <div class="carousel-item"> <img src="img2.jpg" alt="Image 2"> <div class="carousel-caption invisible"> <!-- Или .d-none, в зависимости от ваших потребностей --> <h3>Image 2</h3> <p>Description 2</p> </div> </div> <div class="carousel-item invisible"> <!-- Или .d-none, в зависимости от ваших потребностей --> <img src="img3.jpg" alt="Image 3"> <div class="carousel-caption"> <h3>Image 3</h3> <p>Description 3</p> </div> </div> |
Обратите внимание, что для слайда, который вы хотите скрыть, необходимо добавить класс .invisible или .d-none к самому слайду, а не к его содержимому слайдера (например, к .carousel-item).