VoxelGod
@VoxelGod
Настройка шаблонов WordPress

Почему сетка Bootstrap неправильно работает с Owl Carousel?

Привет. Мне нужно создать секцию с карточками, где будут отображаться члены команды. На одном "слайде" Owl Carousel должно отображаться 4 карточки. + мне нужно расположить их по сетке Bootstrap'а. Если плагин убрать, то все отлично отображается. Хочу заметить, что при более мелких расширениях нежели 1199 px отображает нормально(3-2 карточки на слайде). Вот так выглядит результат кода:b6ad8de378554a1cb02c162b39407b0d.png

Относительно HTML не пугайтесь, там просто 5 одинаковых блоков кода.
HTML
<section id="team">
		<div class="container">
			<h4>Our team</h4>
			<div class="owl-carousel team-members">
				<div class="col-md-3 col-sm-3">
					<div class="member">
						<div class="member-img">
							<img src="img/man.png" alt="">
						</div>
						<div class="member-info">
							<span>Jerry Mack</span>
							<i>Web-developer</i>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis</p>
						</div>
						<div class="member-contacts">
							<i class="fa fa-facebook"></i>
							<i id="middle-icon" class="fa fa-twitter"></i>
							<i id="last-icon" class="fa fa-google-plus"></i>
						</div>
					</div>
				</div>
				<div class="col-md-3 col-sm-3">
					<div class="member">
						<div class="member-img">
							<img src="img/man.png" alt="">
						</div>
						<div class="member-info">
							<span>Jerry Mack</span>
							<i>Web-developer</i>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis</p>
						</div>
						<div class="member-contacts">
							<i class="fa fa-facebook"></i>
							<i id="middle-icon" class="fa fa-twitter"></i>
							<i id="last-icon" class="fa fa-google-plus"></i>
						</div>
					</div>
				</div>
				<div class="col-md-3 col-sm-3">
					<div class="member">
						<div class="member-img">
							<img src="img/man.png" alt="">
						</div>
						<div class="member-info">
							<span>Jerry Mack</span>
							<i>Web-developer</i>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis</p>
						</div>
						<div class="member-contacts">
							<i class="fa fa-facebook"></i>
							<i id="middle-icon" class="fa fa-twitter"></i>
							<i id="last-icon" class="fa fa-google-plus"></i>
						</div>
					</div>
				</div>
				<div class="col-md-3 col-sm-3">
					<div class="member">
						<div class="member-img">
							<img src="img/man.png" alt="">
						</div>
						<div class="member-info">
							<span>Jerry Mack</span>
							<i>Web-developer</i>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis</p>
						</div>
						<div class="member-contacts">
							<i class="fa fa-facebook"></i>
							<i id="middle-icon" class="fa fa-twitter"></i>
							<i id="last-icon" class="fa fa-google-plus"></i>
						</div>
					</div>
				</div>
				<div class="col-md-3 col-sm-3">
					<div class="member">
						<div class="member-img">
							<img src="img/man.png" alt="">
						</div>
						<div class="member-info">
							<span>Jerry Mack</span>
							<i>Web-developer</i>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis</p>
						</div>
						<div class="member-contacts">
							<i class="fa fa-facebook"></i>
							<i id="middle-icon" class="fa fa-twitter"></i>
							<i id="last-icon" class="fa fa-google-plus"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>


$(document).ready(function() {
        $(".team-members").owlCarousel({
			autoPlay: 3000,
			items : 4,
			itemsDesktop : [1199,4],
			itemsDesktopSmall : [973,3]
		});
    });
  • Вопрос задан
  • 1455 просмотров
Решения вопроса 2
VoxelGod
@VoxelGod Автор вопроса
Настройка шаблонов WordPress
Т.к каждый элемент оборачивается в .owl-item автоматически, то .col-md-3 означает 25% именно от этого класса. Поэтому следует вместе с .col-md-3 прописывать руками .owl-item, чтобы эти классы висели на одном Div'е. В таком случае все BootStrap'овские классы работают исправно.
P.S Спасибо откликнувшимся!
Ответ написан
@Kjuri
Насколько я знаю, owl-карусель сама по себе рассчитана на адаптив, т.е. можно указать интервал и, в зависимости от разрешения, должна адаптироваться. Т.е. пытаться ее запихнуть в бутстрап - это во-первых странно, а во-вторых, чревато осложнениями.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
lavezzi1
@lavezzi1
Полюбому owl-carousel к слайдерам добавляет position: absolute, от этого у тебя и получается что в колонках пустота и они схлопываются.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы