Bootstrap карусель использует два ряда при смене слайдов - PullRequest
Новая
       10

Bootstrap карусель использует два ряда при смене слайдов

1 голос
/ 27 февраля 2020

У меня проблема с сайтом старше года. В начале этого года я сделал несколько модификаций и одновременно установил npm, потому что по какой-то причине все пакеты не были найдены при запуске angular (версия 5, та же проблема с 9). После установки npm у меня было несколько проблем, больше всего раздражала карусель. По какой-то причине при скольжении карусель перемещает следующий слайд из «ряда» ниже и затем поднимает слайд на свое место. Этот эффект выглядит совершенно глупо, и у меня не было проблем с этим раньше. Версия bootstrap не изменилась с 4.3.1, хотя я тоже пробовал 4.4.1.

Код: 

<div class="event-slider">
    <div id="carouselEvents" *ngIf="events && events.length > 0" class="carousel slide" data-ride="carousel">
        <div *ngIf="events" class="carousel-inner">
            <div *ngFor="let event of events; first as isFirst" class="carousel-item" [class.active]="isFirst">
                <span class="one-line"><i>Tuleva tapahtuma:</i></span>
                <!--<div class="one-line" [fittext]="true" [activateOnResize]="true" [maxFontSize]="30"><b>{{event.name}}</b></div>-->
                <span class="one-line">{{event.startDateTime | date: 'dd.MM.yyyy HH:mm'}}</span>
                <div class="one-line">
                    <a *ngIf="authService.loggedIn()" routerLink="/events/{{event.id}}">Lue lisää</a>
                    <a *ngIf="!authService.loggedIn()" routerLink="/events">Kaikki tapahtumat</a>
                </div>
            </div>
        </div>        
            <a class="carousel-control-prev" href="#carouselEvents" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselEvents" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

Есть идеи? Прилагается фотография с описанием проблемы.

carousel_problem

1 Ответ

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

Наконец-то нашел решение: по какой-то причине CSS начал работать по-другому после обновления. Был конфликт между ползунком событий CSS и определениями элементов карусели. Я просто удалил поле: auto из класса карусели и вуаля!

...