Как создать такой слайдер или фото без анимации?

Для создания слайдера или фото без анимации с использованием Bootstrap, вы можете использовать компонент "Carousel" (карусель) вместе с некоторыми стилями CSS.

Вот подробная инструкция о том, как создать такой слайдер:

1. Подключение Bootstrap:
Сначала убедитесь, что вы подключили последнюю версию Bootstrap к вашей веб-странице. Вы можете использовать ссылку на CDN или загрузить файлы Bootstrap с официального сайта.

2. Создание HTML-структуры:
Создайте HTML-структуру для вашего слайдера. Он должен содержать элемент с классом "carousel" и внутри элементов с классом "carousel-inner" и "carousel-item".

Пример:

   <div id="myCarousel" class="carousel">
     <div class="carousel-inner">
       <div class="carousel-item active">
         <img src="slide1.jpg" alt="Slide 1">
       </div>
       <div class="carousel-item">
         <img src="slide2.jpg" alt="Slide 2">
       </div>
       <div class="carousel-item">
         <img src="slide3.jpg" alt="Slide 3">
       </div>
     </div>
   </div>

3. Добавление стилей CSS:
Добавьте некоторые стили CSS для вашего слайдер, чтобы удалить анимацию и настроить его внешний вид, если необходимо.

Пример:

   .carousel-item {
     transition: none; /* Удаление анимации перехода */
   }
   .carousel img {
     max-height: 400px; /* Настройка размера изображения */
     width: auto;
   }

4. Инициализация слайдера:
Инициализируйте слайдер с помощью JavaScript при помощи метода $('.carousel').carousel(). Это позволит вам управлять слайдером с помощью кнопок управления или автоматического пролистывания.

Пример:

   $(document).ready(function() {
     $('.carousel').carousel();
   });

После следования этим шагам у вас будет слайдер или фото без анимации, который будет отображаться на вашей веб-странице. Вы можете настроить его внешний вид и поведение, добавляя дополнительные стили CSS и скрипты JavaScript, исходя из ваших потребностей.