如何使第二张幻灯片的图像在出现之前出现一半？

Question

我使用ion-slides稍微有些棘手，默认幻灯片没有显示但是我需要显示第二张幻灯片（假设只有20％出现在下一张当前幻灯片上） 。但是我坚持找到正确的方法。下图显示了我当前的输出：

我的预期输出如下：

以下是我目前为止尝试过的一些代码。您可以在此链接https://stackblitz.com/edit/ionic-honc8u

上看到现场演示

lesson.ts

page-lesson-list {
    .swiper-pagination-bullet-active {
        background: #ffffff;
    }

    .swiper-pagination-bullet {
        background: #c4c4c4;
    }
    .scroll-content
    {
        background-image:url(https://images.pexels.com/photos/772803/pexels-photo-772803.jpeg?w=940&h=650&auto=compress&cs=tinysrgb) !important;
        background-size:cover !important;
    }
    .subject-title
    {
        margin-top: -48%;
        font-size: 1.5em;
        text-shadow: 4px 3px 4px #000;
        color: white;
    }
    .btn-close
    {
        position: fixed;
        top: 15px;
        right: 2px;
        z-index: 20;
    }
    .lesson-title
    {
        font-size: 0.7em;
        text-shadow: 4px 3px 4px #000;
        color:white;
    }
    .lesson-type
    {
        margin-top: 57%;
        font-size: 1.3em;
        text-shadow: 4px 3px 4px #000;
        color:white;
    }
    .lesson-desc
    {
        font-size: 0.7em;
        text-shadow: 4px 3px 4px #000;
        color:white;
    }
    .img-logo
    {
        width: 80px !important;
        margin-bottom: -57% !important;
    }
}

lesson.scss文件：

page-lesson-list {
    .swiper-pagination-bullet-active {
        background: #ffffff;
    }

    .swiper-pagination-bullet {
        background: #c4c4c4;
    }
    .scroll-content
    {
        background-image:url(https://images.pexels.com/photos/772803/pexels-photo-772803.jpeg?w=940&h=650&auto=compress&cs=tinysrgb) !important;
        background-size:cover !important;
    }
    .subject-title
    {
        margin-top: -48%;
        font-size: 1.5em;
        text-shadow: 4px 3px 4px #000;
        color: white;
    }
    .btn-close
    {
        position: fixed;
        top: 15px;
        right: 2px;
        z-index: 20;
    }
    .lesson-title
    {
        font-size: 0.7em;
        text-shadow: 4px 3px 4px #000;
        color:white;
    }
    .lesson-type
    {
        margin-top: 57%;
        font-size: 1.3em;
        text-shadow: 4px 3px 4px #000;
        color:white;
    }
    .lesson-desc
    {
        font-size: 0.7em;
        text-shadow: 4px 3px 4px #000;
        color:white;
    }
    .img-logo
    {
        width: 80px !important;
        margin-bottom: -57% !important;
    }
}

lesson.html文件：

<ion-content no-bounce>
    <div class="btn-close">
        <ion-buttons end>
            <button (click)="goback()" ion-button clear>
                <img [src]="'assets/icon/cross-circular-button.png'" height="32px" width="32px">
            </button>
        </ion-buttons>
    </div>
    <ion-slides slidesPerView="1" pager *ngIf="data_lesson_list" initialSlide="0" spaceBetween="-45">
        <ion-slide *ngFor="let lesson of data_lesson_list" (click)="getLessonContent(lesson.lesson_id)">
            <div class="subject-title" [innerHTML]="lesson.subject_title">
                Science
            </div>
            <div class="lesson-title" [innerHTML]="lesson.lesson_title">
                Lesson 1: Scientific Skills
            </div>
            <div class="logo">
                <img class="img-logo" [src]="lesson.img_logo">
            </div>
            <div class="lesson-type" [innerHTML]="lesson.lesson_type">
                Note
            </div>
            <div class="lesson-desc" [innerHTML]="lesson.lesson_desc">
                Start lesson now!
            </div>
        </ion-slide>
    </ion-slides>
</ion-content>

Answer 1

试试这个

ion-slide.swiper-slide.swiper-slide-duplicate {
    width: 75% !important;
}