使用swiper与离子

时间:2017-03-09 03:17:57

标签: angularjs ionic-framework swiper

我使用离子幻灯片在屏幕上半部分的3个不同图像之间滚动,现在我使用swiper(http://idangero.us/swiper/get-started/#.WMCuvjt942w)来实现覆盖下半部分的垂直滚动菜单屏幕。但问题是它与离子载玻片重叠并且离子载玻片不仅显示一个图像而不是3.是否可以分离上半部分和下半部分屏幕?这是我的代码:

<ion-view title="Main Menu" id="page1">
<ion-content padding="true" class="has-header">
<ion-slides disable-side-menu-drag="" options="{'loop': false}" slider="slider1" delegate-handle="slider1" id="mainMenu-slider1" style="width:100%;height:200px;">
  <ion-slide-page id="mainMenu-slide24" style="background:url(&quot;img/card1.png&quot;) no-repeat center;background-size:cover;"><br><br><br><br><br><br><br><br><br>Amount:</ion-slide-page>
  <ion-slide-page id="mainMenu-slide25" style="background:url(&quot;img/card2.png&quot;) no-repeat center;background-size:cover;"><br><br><br><br><br><br><br><br><br>Amount:</ion-slide-page>
  <ion-slide-page id="mainMenu-slide26" style="background:url(&quot;img/card3.png&quot;) no-repeat center;background-size:cover;"><br><br><br><br><br><br><br><br><br>Amount:</ion-slide-page>
</ion-slides>
</ion-content>
 <ion-content>
 <div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
    </div>
</div>
</ion-content>
</ion-view>

0 个答案:

没有答案