Как в слайдере boostrap 4 сделать отображение нескольких слайдов одновременно?

Question

[Иван Иванов]

Взял слайдер-карусель с офф сайта boostrap. Всё просто и довольно понятно. Вот его код:

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

И он соотвествует поставленной задаче, а именно выглядит так:



Но на больших разрешениях он должен выглядеть вот так:



Вот и не пойму, как сделать так, что бы отображалось два слайда рядом и переключался на размер одного слайда при нажатии на кнопки "Вперёд" "Назад".

Answer 1

[DivineDraft]

Не знаю устройства бутстрап, но с это задачей легко справится слайдер owl carousel.
Прям в коде можно прописывать на каком разрешение выводить сколько слайдов.

Comments

[Иван Иванов]

Я правильно понимаю, что за это отвечает свойство responsive, при инициализации слайдера через JS? Вообще конечно хотелось бы разобраться с boostrap, так как в некоторых проектах руки бывают очень сильно связаны и руководство начинает ругаться, что я подключаю сторонние плагины, без которых можно было бы обойтись. Например может последовать вопрос: "Зачем было использовать еще один слайдер, если ты используешь boostrap для вёрстки и он сам имеет слайдер?"

[DivineDraft]

Да, именно, создаете слайдер, даете имя и добавляете responsive. Примерно так:

jQuery(document).ready(function($) {
 $('.kino-top').owlCarousel({
 loop:true,
 margin:10, 
 nav:false,
 responsive:{
 0:{
 items:1
 },
 450:{
 items:3
 },
 600:{
 items:4
 },
 800:{
 items:5
 },
 1000:{
 items:6
 },
 1100:{
 items:7
 },
 1200:{
 items:9
 }
 }
});

[Иван Иванов]

DivineDraft, Спасибо, как решение, для меня на данный момент, подходит. Но к сожалению не могу отметить решением в вопросе, так как всё таки вопрос про boostrap. Но вам спасибо! Мне это помогло, решить поставленную задачу.

[DivineDraft]

Иван Иванов, удачи с проектом)

[Иван Иванов]

DivineDraft, Я прошу прощения, если беспокою. Не могу понять, вызываю инициализацию слайдера

$(document).ready(function(){ 
	$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    autoplay:true,
    autoplayTimeout:5000,
    autoplayHoverPause:true,
    nav:true,
		responsive:{
			320:{
				items:1
			},
			600:{
				items:3
			},
			1000:{
				items:5
			}
		}
	})
});

но кнопки навигации не появляются, а в инспекторе кода он пишет что к блоку nav добавлен класс disable который и отключает их отображение. Не могу понять почему так? Это баг?

[DivineDraft]

Иван Иванов, добавьте nav:true, пример:

loop:true,
  nav:true,
  autoplay:true,

Больше опций

[Иван Иванов]

DivineDraft, Я так и сделал, а всё равно не появляется =(

[Иван Иванов]

DivineDraft, разобрался, нужно было указать кол-во элементов верное. И навигация появилась.

Answer 2

[profesor08]

Никак. Ищи альтернативы. Популярные слайдеры как-то через одно место работают в условиях адаптивной сетки, а зачастую отказываются, пытаясь прописывать фиксированные размеры элементам, и на этом месте все ломается. Либо сходят с ума, если один из контейнеров флексбокс.