Как сделать пропуск слайда в bootstrap 4?

Пользователь

от kameron , в категории: HTML/CSS , 2 года назад

Как сделать пропуск слайда в bootstrap 4?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от eryn.rodriguez , 2 года назад

@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>


В примере выше третий слайд будет скрыт на всех разрешениях экрана.

Пользователь

от leila.dickinson , год назад

@kameron 

Вы также можете использовать классы .invisible или .hidden, чтобы скрыть слайд в Bootstrap 4. Оба класса скрывают элемент, но у них есть некоторые отличия:

  • .invisible скрывает элемент, но сохраняет его место в потоке страницы. Другими словами, элемент будет занимать место на странице, но пользователь не будет видеть его.
  • .d-none скрывает элемент полностью, включая его место в потоке страницы. Элемент не будет занимать место на странице и будет полностью скрыт от пользователя.


Вот пример использования классов .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).