swiper父级元素处于隐藏状态滚动效果失效问题

在使用vue-awesome-swiper的时候，实现这样一个功能, 点击页面的banner图（Banner.vue），进入一个图片画廊（Gallary.vue），可以查看更多相关的照片，但发现轮播图滚动效果失效

原因是：一开始Gallay.vue的所有用swiper控制的图片处于隐藏状态，直到点击才进入图片画廊显示图片。swiper其父级元素处于隐藏状态(display:none), 会导致swiper初始化失败, 页面中的滚动效果就会有问题。

Gallary.vue的结构

<template>
    <div class="container"  @click="handleGallaryClick">