Bootstrap управление каруселью не работает на моем ветке - PullRequest
Новая
       9

Bootstrap управление каруселью не работает на моем ветке

0 голосов
/ 26 марта 2020

Я создал карусель с bootstrap и веткой, но элементы управления не работают.

Это карусель с 3 предметами и автоматически скользит по одному предмету каждые 2se c.

Вот часть моего взгляда: 

<div id="domaine_carousel" class="carousel slide" data-ride="carousel" data-interval="2000">
            <div class="carousel-inner row w-100 mx-auto">
                {% for jobs in jobsByDomaine %}
                    <div class="carousel-item col-md-4 mr-0{% if loop.first %} active{% endif %}" data-slide="{{ loop.index }}">
                        <img src="https://picsum.photos/200" alt="{{ jobs.nom }}" class="rounded-circle z-index-0 w-100">
                        <a id="link_plus" href="{{ url('job/' ~jobs.id) }}" class="btn-jobs">
                            <i class="fa fa-plus"></i>
                        </a>
                        <div class="carousel-caption d-none d-md-block">
                            <p>{{ jobs.nom }}</p>
                        </div>
                    </div>
                {% endfor %}
            </div>
            <a class="carousel-control-prev" href="#domaine_carousel" role="button" data-slide="prev">
                <i class="fa fa-chevron-left fa-lg text-muted"></i>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#domaine_carousel" role="button" data-slide="next">
                <i class="fa fa-chevron-right fa-lg text-muted"></i>
                <span class="sr-only">Next</span>
            </a>
        </div>

Здесь мои CSS, чтобы увидеть 3 предмета на карусели и сдвинуть только один: 

//Carousel

/* show 3 items */
.carousel-inner .active,
.carousel-inner .active + .carousel-item,
.carousel-inner .active + .carousel-item + .carousel-item {
    display: block;
}

.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item, {
    transition: none;
}

.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
    position: relative;
    transform: translate3d(0, 0, 0);
}

.carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    display: block;
    visibility: visible;
}

/* left or forward direction */
.active.carousel-item-left + .carousel-item-next.carousel-item-left,
.carousel-item-next.carousel-item-left + .carousel-item,
.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
    position: relative;
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
}

/* farthest right hidden item must be also position for animations */
.carousel-inner .carousel-item-prev.carousel-item-right {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    visibility: visible;
}

/* right or prev direction */
.active.carousel-item-right + .carousel-item-prev.carousel-item-right,
.carousel-item-prev.carousel-item-right + .carousel-item,
.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
    position: relative;
    transform: translate3d(100%, 0, 0);
    visibility: visible;
    display: block;
}

#link_plus {
        transform: translate(16.4em, -3.4em);
}

.carousel-control-next {
    transform: translateX(7em) scale(2.5);
}

.carousel-control-prev {
    transform: translateX(-7em) scale(2.5);
}

.carousel-caption {
    height: 7em;
    transform: translateY(-5.9em);

    p {
        font-size: 1.4rem;
        font-weight: 600;
    }
}

Я пытался включите простой пример из Bootstrap do c, но элементы управления тоже не работают.

Я использую Bootstrap 4.3.1 с модулем npm в проекте laravel , Итак, я проверил, что BS правильно скомпилирована в моем основном файле JS, и я вижу в BS, utils. js и popper. js.

Так что я действительно не понимаю, почему карусели управление не работает.

Есть идеи?

...