Question

嗨我试图在我的离子项目中设置swiper但它不起作用/显示请帮助

您可以在下面的链接中看到我的代码有三个文件

apps.js

$scope.swiperOptions = {
    /* Whatever options */
    effect: 'slide',
    initialSlide: 0,
    /* Initialize a scope variable with the swiper */
    onInit: function(swiper){
      $scope.swiper = swiper;
      // Now you can do whatever you want with the swiper
    },
    onSlideChangeEnd: function(swiper){
      console.log('The active index is ' + swiper.activeIndex); 
    }
  };

的index.html

<!---------content and tab start here------->

              <ion-tabs class="tabs-icon-top">
             <!--=======content start here======-->
               <ion-tab title="HOME" icon-on="home_tab" icon-off="home_tab" href="#/home">
                    <ion-nav-view name="tab_home"></ion-nav-view>
                </ion-tab>
                <ion-tab title="LIVE CHAT" icon-on="chat_tab" icon-off="chat_tab" href="#/livechat">
                   <ion-nav-view name="tab_livechat"></ion-nav-view>
                </ion-tab>
                <ion-tab title="TRACK ORDER" href="#/track" icon-on="track_order" icon-off="track_order">
                   <ion-nav-view name="tab_track_order"></ion-nav-view>
                </ion-tab>
                 <ion-tab title="PINTAR BRT" href="#/tab_pintar" icon-on="pintar_brt" icon-off="pintar_brt">
                   <ion-nav-view name="tab_pintar_brt"></ion-nav-view>
                </ion-tab>
            </ion-tabs>

             <!--======content end here=========-->


<!---------content and tab end here------->

main_page.html

<ion-view >
<!-- menu bar-->
        <ion-nav-buttons side="left">
            <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
         </ion-nav-buttons>

         <ion-nav-buttons side="right">
            <button menu-toggle="right" class="button button-icon icon ion-bag"></button>
         </ion-nav-buttons>
        <ion-content ng-controller="main_page">


    <!-----i call swiper slider here but not show please help-->    
            <div class="row">
                <div >
                    <ion-slides slider="swiper" options="swiperOptions">
                    <ion-slide-page><h1>SLIDE 1</h1></ion-slide-page>
                    <ion-slide-page><h1>SLIDE 2</h1></ion-slide-page>
                    <ion-slide-page><h1>SLIDE 3</h1></ion-slide-page>
                    </ion-slides>
                    </div>
            </div>      
</ion-content>

有关详细信息，请打开此链接 https://embed.plnkr.co/vEr415EWxrVdwHCdL9z9/ 我应该怎么处理我的代码

谢谢

如何在离子应用中设置swiper滑块

0 个答案: