ionic3 使用swiper插件实现轮播效果

由于app的更新迭代我需要完成新版本设计图的开发

刚开始就遇到一个问题首页的banner图需要实现某种效果而ionic3自带的轮播图效果怎么改都改不到我想要的效果

效果图如下自动播放不断轮播

所以我就用平时用的swiper插件找找有没有类似的还真找到一个链接 http://www.swiper.com.cn/demo/110-slides-per-view.html

不过在使用过程中还是遇到一些问题下面会说到

1.在ionic3项目的src文件夹下面有一个Index.html页面在里面引入swiper.min.js 和 swiper.min.css

<link rel="stylesheet" type="text/css" href="assets/css/swiper.min.css">
<script src="assets/js/swiper.min.js"></script>

2.在你需要用到轮播图的页面 ts 中声明 Swiper

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';


declare let Swiper:any;

3.在页面加载完成之后写入如下代码

注意事项：slidesPerView 这个属性的值可以调成小数点 1.2 这样才和设计图的效果一样

但是有个问题当它的值未小数的时候并且循环轮播第二次开始往后播放的时候第二张图片不会显示就是还没有放到右边那个位置(这是我研究它的代码发现的一个bug) 但是它还是会滚动滚动后会显示详情见下图

这个问题我用另一种方法解决了 slidesPerView的值改为了2 还用css样式修改了一下视觉上是一样而且也没有上面的问题详情看下面css

ionViewDidLoad() {
    var swiper = new Swiper('.swiper-container', {
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
      slidesPerView: 2,
      spaceBetween: 10,
      centeredSlides: true,
      loop: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    });
  }

4.在对应的html中写如下代码

<div class="banner">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="assets/images/positions/banner.png"></div>
        <div class="swiper-slide"><img src="assets/images/positions/banner2.png"></div>
        <div class="swiper-slide"><img src="assets/images/positions/banner3.png"></div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>

5.在对应的scss页面写入代码

注意事项：上面slidesPerView值改为2 之后左右两边是下面图片中的效果左右两边太大了占百分比太多

所以我外面包了一个类名为banner的div 把它的宽调大然后居中多余出来的被父元素overflow:hidden 所以和设计图效果完全一样了也没有Bug了完美解决！！！

// banner图
  .banner {
    width: 180%;
    height: auto;
    margin-left: -40%;
    margin-top: 14px;
  }
  .banner img {
    width: 100%;
    display: block;
  }
  .swiper-slide {
    text-align: center;
    font-size: 18px;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
  .swiper-pagination-bullet-active {
    background: #ff8503;
  }
  .swiper-slide img {
    width: 100%;
    border-radius: 15px!important;
  }

然后这个难题就攻克了有遇到类似问题的可以试试另外想在ionic3中引用外部插件的也可以用这种方法

ionic3 使用swiper插件 实现轮播效果

猜你喜欢

ionic3 使用swiper插件实现轮播效果