移动每个幻灯片进度的视差，而不是总进度

Question

我正在编写一个 Ionic 2 应用程序，并希望使用 Slider 组件(基于 Swipeper(来执行类似于此演示的操作： http://idangero.us/swiper/demos/28-parallax.html

但是每当我添加视差项目时，它都会根据总滑块进度(如演示中的背景(移动，并且我发现无法让它们基于单个幻灯片进度移动(如演示中的文本(。(刷卡器文档(

有谁知道这是否可能？Ionic 文档在幻灯片中没有任何关于视差的详细信息。

我尝试过：

<ion-slides parallax progress>
<ion-slide>
<h2>No Parallax</h2>
<p data-swiper-parallax="-100">Parallax: -100</p>
<p data-swiper-parallax="-200">Parallax: -200</p>
</ion-slide>
<ion-slide>
<h2>No Parallax</h2>
<p data-swiper-parallax="-100">Parallax: -100</p>
<p data-swiper-parallax="-200">Parallax: -200</p>
</ion-slide>
<ion-slide>
<h2>No Parallax</h2>
<p data-swiper-parallax="-100">Parallax: -100</p>
<p data-swiper-parallax="-200">Parallax: -200</p>
</ion-slide>
</ion-slides>

演示：http://plnkr.co/edit/k0b92hqkdeUR57t71RR4?p=preview

Answer 1

您可以通过在第一张幻灯片中放置背景图像来实现此目的，如下所示：

<ion-slides parallax pager>
<ion-slide>    
<div class="image-parallax">
<img data-swiper-parallax="2100" src="url.to/image.png"/>
</div>
</ion-slide>
<ion-slide>
<p> Other slide content </p>
<ion-slide>
</ion-slides>

然后，将div 的样式设置为：

.image-parallax{    
position: absolute;
img{
margin-left: 200px;
width: 2000px;
height: auto;
}
}

然后调整背景的边距，宽度和高度。

希望对您有所帮助！

Answer 2

我已经设法用离子 4 解决了这个问题，将背景图像放入并使背景附件本地化。

我的页面.html：

<ion-slides [options]="slideOpts" class="parallax-bg" data-swiper-parallax-x="-20%" [ngStyle]="{'background-image':'url(assets/images/background_'+category+'.svg)'}">

my.page.scss：

.parallax-bg {
background-position: center;
background-attachment: local;
background-repeat: repeat-x;
}