Active elements 1, displayed 2 what's the problem?

L

Lord_Dantes2018-12-18 15:12:00

Owl Carousel

Lord_Dantes, 2018-12-18 15:12:00

Good day.
The problem is that there are several carousels on the site as a whole, they are all connected separately and work smoothly. But here's the last carousel, it somehow began to not logically show all the slides that are available for viewing.
HTML carousels

<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,
});

Screenshot, of the carousel itself

Screenshot of another carousel, which behaves normally

The code of other carousels is no different from others

Code for other carousels

$('.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,
});

I don't know what could be the problem, this is weird.
If I have not thrown everything, please indicate I will add it.
I would appreciate any help, thanks.

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

L

Lord_Dantes, 2018-12-20
@Lord_Dantes

disclaimer

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

I found a solution, it turned out to be a strange bug.
It turned out that if you call owl-carousel events during initialization or after it, or in general another event related except for the activation of the carousel itself, then activation after this event will be "buggy", as I understood when I moved the lines of code above the function associated with it.
That is, I had

It's better not to do that

$('.carousel').owlCarousel({});
$('.carousel2').owlCarousel({});
$('.carousel3').owlCarousel({});
$('.carousel4').owlCarousel({});
owl.owlCarousel();
owl.on('translate.owl.carousel', function(event) {
  $('.owl-nav').toggle();
})
$('.carousel5').owlCarousel({});

Then 5 the carousel did not work out the 'items' property, the reasons could not be found, but this is a fact.
It is best to call all carousels at the beginning, and process events later.

This is how it should be done

$('.carousel').owlCarousel({});
$('.carousel2').owlCarousel({});
$('.carousel3').owlCarousel({});
$('.carousel4').owlCarousel({});
$('.carousel5').owlCarousel({});
owl.owlCarousel();
owl.on('translate.owl.carousel', function(event) {
  $('.owl-nav').toggle();
})

Thank you for your attention.