Вопрос по carousel, bootstrap-4 – Я только что заметил, что оригинал использует Bootstrap 4 alpha 6, я использую Beta 2 .... вот почему на фото изображено вертикальное изображение. но где я должен измениться, чтобы сделать горизонт вместо вертикального

1

могу понять, как заставить это показать 4 изображения вместо 3.

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

Скрипт JS

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

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

    if (next.next().length>0) {
    next.next().children(':first-child').clone().appendTo($(this));
    }
    else {
      $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
    }
});

CSS

.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%)
}

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

и я изменил на этот код

<div class="carousel-item col-md-3">

вместо этого оригинального кода

<div class="carousel-item col-md-4">

Ваш Ответ

1   ответ
1

.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%)
}

Также на каждом слайде должен быть клонирован дополнительный элемент. Таким образом, изменение JS:

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

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

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

Bootstrap 4.0.0 Demo - 4 слайда, продвижение 1

Примечание: От альфа 6 (когда был задан оригинальный вопрос) доBootstrap 4.0.0, активный элемент карусели изменен на flexbox. Следовательно, то же самое должно быть сделано для соседних элементов в мультикарусели.

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

Также см:Bootstrap 4.1.0 (продвигать все 4 сразу)

Я только что заметил, что оригинал использует Bootstrap 4 alpha 6, я использую Beta 2 .... вот почему на фото изображено вертикальное изображение. но где я должен измениться, чтобы сделать горизонт вместо вертикального edokko
Большое спасибо! Работает хорошо, но фото показывает вертикальную линию. Я знаю, если вы видите на Codeply, он не будет отображаться так. edokko

Похожие вопросы