Исправление карусели из нескольких предметов Bootstrap 4 на экране XL

Question

(Это точно не дубликат).

Я реализовал Bootstrap 4 карусель, которая отображает несколько элементов. Он должен соответствовать этим конкретным c требованиям для экранов разных размеров:

• 0 - md экранов (непосредственно перед md запуски): карусель с 2 видимыми элементами
• md - lg экраны (непосредственно перед запуском lg ): карусель с 3 видимыми элементами
• lg - xl экранов (непосредственно перед запуском xl ): карусель с 4 видимыми элементами
• xl экраны и не только: карусель с 6 видимыми элементами

Работает очень хорошо, за исключением медиазапроса xl . Я пытался решить эту проблему часами безуспешно:

1. , если ширина экрана составляет 1200 пикселей или больше (xl), на карусели отображаются только 4 или 5 элементов вместо 6, поэтому странное мерцание при циклическом переключении предметов.

sm экран 675px . Это отлично работает.

Мд экран 768px . Это прекрасно работает.

lg экран 992pxx . Это прекрасно работает.

xl экран 1200px Как видите, отображаются только 4 элемента (иногда 5 при запуске пример). Этот размер экрана должен отображать 6 пунктов.

если вы нажмете Prev , а затем Next , будет небольшая, но неопознанная задержка для поступления нового предмета справа от карусели.

Первый баг должен быть исправлен, но было бы неплохо исправить и 2-й.

Вместо того, чтобы вставлять код здесь, я добавил живой пример по ссылке ниже:

https://jsitor.com/SQENGSYDz

Спасибо за помощь!

Answer 1

Надеюсь, вам понравится мой второй ответ.

Пояснение

ширина экрана составляет 1200 пикселей или более (xl), карусель отображает только 4 или 5 предметов вместо 6, что вызывает странное мерцание при циклическом переключении предметов.

Каждый 4-й элемент не может получить CSS из transition, поэтому я добавил CSS его в @media query (min-width: 1200px) и теперь он отображает 6 элементов.

Как видите, отображаются только 4 элемента (иногда 5 при запуске примера). Этот размер экрана должен отображать 6 элементов.

Поскольку вы добавили var items_per_slide = Math.round(total_items / 2); в свой код и всегда total_items равны 7, то это даст вам 4 ответ, так что это применимо только для 4 элемента в одной строке.

, поэтому я статически добавил 6 в ваш код, и ваша проблема решена.

, если вы нажмете Prev, а затем Next, будет небольшой но неопознанная задержка для нового элемента, поступающего справа от карусели.

Это из-за вас hard-coded 33.333333333333333% и -16.666666666666667% в вашем коде, и это создает некоторую задержку.

https://codepen.io/nisharg/pen/YzyGvQN?editors=0111

Answer 2

Вот ваше решение, основанное на этом { ссылка }

Если вы обнаружили ошибку на слайде, вы можете использовать Как добавить разрыв между изображениями в слайдере карусели или убрать глюк когда слайд концепт (мой вопрос)

$('#recipeCarousel').carousel({
    interval: 250000
})

$('.carousel .carousel-item').each(function(){
    var minPerSlide = 4;
    var next = $(this).next();
    if (!next.length) {
        next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo($(this));

    for (var i=0;i<minPerSlide;i++) {
        next=next.next();
        if (!next.length) {
            next = $(this).siblings(':first');
        }

        next.children(':first-child').clone().appendTo($(this));
    }
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<style>
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
    display: flex;
}

.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
    transform: translateX(50%);
}

.carousel-inner .carousel-item-left.active, 
.carousel-inner .carousel-item-prev {
    transform: translateX(-50%);
}

@media (min-width: 768px) and (max-width: 992px) {
    .carousel-inner .carousel-item-right.active,
    .carousel-inner .carousel-item-next {
        transform: translateX(33.33%);
    }

    .carousel-inner .carousel-item-left.active, 
    .carousel-inner .carousel-item-prev {
        transform: translateX(-33.33%);
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .carousel-inner .carousel-item-right.active,
    .carousel-inner .carousel-item-next {
        transform: translateX(25%);
    }

    .carousel-inner .carousel-item-left.active, 
    .carousel-inner .carousel-item-prev {
        transform: translateX(-25%);
    }
}

@media (min-width: 1200px) {
    .carousel-inner .carousel-item-right.active,
    .carousel-inner .carousel-item-next {
        transform: translateX(16%);
    }

    .carousel-inner .carousel-item-left.active, 
    .carousel-inner .carousel-item-prev {
        transform: translateX(-16%);
    }
}

.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left{ 
    transform: translateX(0);
}
</style>

<div class="container text-center my-3">
  <h2 class="font-weight-light">Bootstrap 4 - Multi Item Carousel</h2>
  <div class="row mx-auto my-auto">
      <div id="recipeCarousel" class="carousel slide w-100" data-ride="carousel">
          <div class="carousel-inner w-100" role="listbox">
              <div class="carousel-item active">
                  <img class="img-fluid col-6 col-md-4 col-lg-3 col-xl-2" src="http://placehold.it/380?text=1">
              </div>
              <div class="carousel-item">
                  <img class="img-fluid col-6 col-md-4 col-lg-3 col-xl-2" src="http://placehold.it/380?text=2">
              </div>
              <div class="carousel-item">
                  <img class="img-fluid col-6 col-md-4 col-lg-3 col-xl-2" src="http://placehold.it/380?text=3">
              </div>
              <div class="carousel-item">
                  <img class="img-fluid col-6 col-md-4 col-lg-3 col-xl-2" src="http://placehold.it/380?text=4">
              </div>
              <div class="carousel-item">
                  <img class="img-fluid col-6 col-md-4 col-lg-3 col-xl-2" src="http://placehold.it/380?text=5">
              </div>
              <div class="carousel-item">
                  <img class="img-fluid col-6 col-md-4 col-lg-3 col-xl-2" src="http://placehold.it/380?text=6">
              </div>
          </div>
          <a class="carousel-control-prev w-auto" href="#recipeCarousel" role="button" data-slide="prev">
              <span class="carousel-control-prev-icon bg-dark border border-dark rounded-circle" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next w-auto" href="#recipeCarousel" role="button" data-slide="next">
              <span class="carousel-control-next-icon bg-dark border border-dark rounded-circle" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
          </a>
      </div>
  </div>
  <h5 class="mt-2">Advances one slide at a time</h5>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>