Гладкая карусель переполняет контейнер - PullRequest
Новая
       102

Гладкая карусель переполняет контейнер

1 голос
/ 06 августа 2020

Карусель с эффектом переполнения контейнера.

Ожидаемый результат - первое изображение / текущее состояние, второе изображение

Родительский контейнер HTML (макет) 

<main>
    <div class="layout__main-container p-4">
        <app-discover-animals class="app-discover-animals mx-n4 mx-md-0"></app-discover-animals>
        ... (others sections)
    </div>
    <app-footer></app-footer>
</main>

Раздел HTML (компонент обнаружения животных) 

<section>
    <div class="discover-animals__descriptor px-4 px-md-0">
        <h5 class="mb-3 typo-h5-24_B text-center">{{GlobalTranslations.TNL__discover_the_world_of_mylovelyanimals}}</h5>
        <p class="typo-body-16_Q text-center text-col-fjordgreen">{{GlobalTranslations.TNL__discover_mylovelyanimals_description}}</p>      
    </div>
    <div class="discover-animals__carousel position-relative d-flex flex-column align-items-center">
        <div class="discover-animals__carousel-wrapper mb-4">
            <ngx-slick-carousel 
            class="skin__carousel carousel"
            #slickModal="slick-carousel" 
            [config]="slideConfig">
                <div ngxSlickItem *ngFor="let animals of Animals | keyvalue" class="slide">
                    <div  class="d-flex flex-column align-items-center">
                        <img src="{{animals.value.img}}" alt="{{animals.value.name}}" width="100%">
                        <h2 class="typo-body-40_B mt-2">{{animals.value.name}}</h2>
                        <p class="typo-body-14_Q mb-2">{{animals.value.shortDescriptor}}</p>
                        <a href="{{animals.value.page}}"><button class="skin__btn-transparent px-3 py-2 typo-body-14_B">{{GlobalTranslations.TNL__meet_me}}</button></a>
                    </div>
                </div>
            </ngx-slick-carousel>
        </div>
        <a><button class="skin__btn-transparent-white px-6 py-2 typo-body-15_B text-col-lavender">{{GlobalTranslations.TNL__meet_more_friends}}</button></a>
    </div>
</section>

Тег компонента 'app-discover-animals' содержит свойство overflow: hidden для исправления переполнения Slick. Я хочу поместить свойство overflow: hidden в класс .discover-animals__carousel-wrapper, но это решение не работает.

1 Ответ

0 голосов
/ 07 августа 2020 
<div class="layout__main-container p-4">

Определяет сетку как: 

.layout__main-container {
    display: grid;
    grid-gap: $spacer4;
    grid-template-columns: repeat(1, 1fr);
  }

Решение: 

grid-template-columns: repeat(1, 100%);
...