标签: ion-slide-box

我想展示第二个幻灯片项目的一部分,但不知道该怎么做.这是我到目前为止(基本的离子幻灯片):

<ion-slides pager >
            <ion-slide>
              <h2>Slide 1</h2>
            </ion-slide>

            <ion-slide>
              <h2>Slide 2</h2>
            </ion-slide>

            <ion-slide>
              <h2>Slide 3</h2>
            </ion-slide>
</ion-slides>

这就是我想要的方式:

我试图将离子滑片的宽度改为小于100%,但是第二张和第三张幻灯片只是从屏幕左侧进一步向左移动.

谁能帮我 ？

在我的页面上,我有一个用于图像的离子滑动盒.由于在我的应用中用户可以嵌入视频,我还应该将带有视频的iframe添加到同一个滑块.这就是我的代码现在的样子:

这是我的HTML:

<ion-slide-box ng-if="slider.length > 1">
  <ion-slide ng-repeat="item in slider">
    <img ng-if="item.image" ng-src="{{ fileServer }}/imagecache/cover/{{ item.image }}" class="cover">
    <iframe ng-if="item.video" src="{{ item.video | safeUrl }}"></iframe>
  </ion-slide>
</ion-slide-box>

这只适用于图像,但是当我有视频时,我不能滑动它们,如果它们占用100%宽度,我已经设置在我的CSS中,我只能滑动它们,如果它们宽度小于那个,如果我仅在iframe未占用滑块空间的部分上滑动它们.由于我需要让iframe占据100%的宽度,我想知道如何让它工作？