@Lord_Dantes
Full stack Developer

Активных элементов 1, отображается 2 в чем проблема?

Доброго времени суток.
Проблема в том что на сайте в целом несколько каруселей, все они подключены отдельно и работают слажено. Но вот последняя карусель, начала как-то не логически показывать все слайды которые доступны для просмотра.
HTML-карусели
<section id="reviews">
		<div class="container">
			<h3>Reviwes</h3>

			<div class="reviwes-carousel owl-carousel">

				<div class="reviwes-box">
					<div class="reviwes-user-box_img">
						<img class="reviwes-user_img" src="img/5.png" alt="">
					</div>
					<p class="reviwes-info_txt">text</p>
					<p class="reviwes-user_txt">text</p>
				</div>

			</div>

			<div class="add-comment">
				<form action="POST">
					<textarea placeholder="Почніть вводити ваш відгук тут"></textarea>
					<input type="submit" class="add-reviews" value="Залишити відгук">
				</form>
			</div>

		</div>
	</section>

Javascript
$('.reviwes-carousel').owlCarousel({
  items:1,
  dots:false,
  nav:true,
});

Скриншот, самой карусели
5c18e36dc0e9a899771915.png
Скриншот другой карусели, которая нормально себя ведёт
5c18e3b1cd2e6261092753.png
Код других каруселей не как не отличается от других
Код других каруселей
$('.partners-slider').owlCarousel({
  items:3,
});
$('.universal-slider').owlCarousel({
  items:1,
  dots:false,
  nav: true,
  navText:["<div class='semicircle-left'><div class='arrow-left'></div></div>","<div class='semicircle-right'><div class='arrow-right'></div></div>"]
});
$('.education_wrapper').owlCarousel({
  items:1,
});
$('.carousel-orphan').owlCarousel({
  items:1,
  dots:false,
  navText:["","<img src='img/orphan-right.png'>"],
  nav:true,
});
$('.festivals-carousel').owlCarousel({
  items:1,
  dots:false,
  nav: true,
  navText:["<div class='semicircle-left'><div class='arrow-left'></div></div>","<div class='semicircle-right'><div class='arrow-right'></div></div>"]
});
$('.team-slider').owlCarousel({
  items:1,
  loop:true,
  dots:false,
  nav:true,
  navText: ['','<img src="img/all-arrows.png">'],
});

var owl = $('.owl-carousel');
owl.owlCarousel();
owl.on('translate.owl.carousel', function(event) {
  $('.team-slider .owl-nav').toggle();
})
owl.on('translated.owl.carousel', function(event) {
  $('.team-slider .owl-nav').toggle();
});

$('.reviwes-carousel').owlCarousel({
  items:1,
  dots:false,
  nav:true,
});


Я не знаю в чем может быть проблема странно все это.
Если я не все скинул, укажите пожалуйста добавлю.
Буду рад любой помощи, спасибо.
  • Вопрос задан
  • 24 просмотра
Решения вопроса 1
@Lord_Dantes Автор вопроса
Full stack Developer
disclaimer

Автор не является опытным в разработке сайтов, но что-то да может подказать.
Если я указал ошибку ниже, или неправильно что-то написал буду рад любим правкам или критики с вашей стороны

Нашёл решение, это оказался странный баг.
Оказалось что если вы вызываете события owl-carousel при инициализации или после неё или вообще другое событие связанное кроме активации самой карусели то активация после этого события будет "баганным", так я понял когда переместил строчки кода выше функции связанной с ней.
То есть у меня было
Лучше так не делать
$('.carousel').owlCarousel({});
$('.carousel2').owlCarousel({});
$('.carousel3').owlCarousel({});
$('.carousel4').owlCarousel({});
owl.owlCarousel();
owl.on('translate.owl.carousel', function(event) {
  $('.owl-nav').toggle();
})
$('.carousel5').owlCarousel({});


Тогда 5 карусель не отрабатывала свойство 'items', причины не удалось найти но это факт.
Лучше всего вызывать все карусели вначале ,а события отрабатывать позже.
Вот так нужно делать
$('.carousel').owlCarousel({});
$('.carousel2').owlCarousel({});
$('.carousel3').owlCarousel({});
$('.carousel4').owlCarousel({});
$('.carousel5').owlCarousel({});
owl.owlCarousel();
owl.on('translate.owl.carousel', function(event) {
  $('.owl-nav').toggle();
})


Спасибо за внимание.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы