微信公眾號的制作,其中缺少不了希望實現標題、內容、圖片的滑動效果,
這時候可以選擇使用(swiper插件)實現相應效果,功能十分強大,鏈接:http://www.swiper.com.cn/;
最近做一款公眾號時,在實現功能時遇到一難點,廢了九牛二虎之力,終於在一高人的幫助下解決了。
1、問題描述:
原本該滑動項是隱藏的(display:none;),滑動項的代碼是參考swiper插件文檔內容而寫,
通過按鈕點擊之后該滑動項顯示(dispay:block),再進行左右滑動效果時,始終顯示swiper-slider項的width:0;
故而導致沒有效果出來。
2、解決方案:
(1)在本身元素 或者父元素 顯示出來 然后調用swiper實例 ;
(2) observer:true,//修改swiper自己或子元素時,自動初始化swiper
observeParents:true//修改swiper的父元素時,自動初始化swiper
備注:代碼如下(添加一監聽事件):
var swiper2 = new Swiper('.swiper-container2', {
observer: true,//修改swiper自己或子元素時,自動初始化swiper
observeParents: true,//修改swiper的父元素時,自動初始化swiper
});