时间戳

首页 > 解决方案 > 光滑的旋转木马溢出容器

html - 光滑的旋转木马溢出容器

问题描述

光滑的旋转木马溢出容器。

预期结果 - 第一张图像/当前状态，第二张图像

父容器 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放在 class 内.discover-animals__carousel-wrapper，但这个解决方案不起作用。

标签： htmlcssangularjssliderslick.js

解决方案

<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%);

推荐阅读