css - Ionic 4 Slides（带 swiper 的离子幻灯片）居中但不是第一个和最后一个

Question

我希望滑块使用居中的幻灯片，但不是在第一个和最后一个。

当我启用居中幻灯片属性“centeredSlides：true”并设置“slidesPerView：1.2”时，我在中间幻灯片上得到了正确的结果，但第一个和最后一个我想分别位于左侧或右侧位置。

this.SlideOptionsPaths =
    {
        initialSlide: 0,
        centeredSlides: true,
        slidesPerView: 1.2,
        slidesPerGroup: 1,
        spaceBetween: 10,
        //slidesOffsetBefore: -82,
        //slidesOffsetAfter: 160,
        speed: 400,
        fadeEffect:
        {
            crossFade: true
        }
    };

这是实际行为：

我需要将第一张图片左对齐...

刷卡（中间卡）时，我需要这种行为（这是正确发生的）：

标签： cssangularionic-frameworkionic4swiper

Answer 1

到发布问题时，还没有简单的方法可以实现此结果。但自 Swiper 5.2 版以来，API中添加了一个新centeredSlidesBounds参数。

您需要做的就是在选项对象中使用以下参数：

{
  centeredSlides: true,
  centeredSlidesBounds: true
}