1. 程式人生 > >使用swiper 輪播外掛ajax 請求載入圖片時,無法滑動

使用swiper 輪播外掛ajax 請求載入圖片時,無法滑動

因為banner圖是動態建立的,在外掛開始初始化時,文件流中沒用圖片,故沒有建立相應寬度,通過調整js載入順序,問題還是沒有解決。最後找到swiper外掛 api 有屬性是可以根據內容變動,自動初始化外掛的,新增observer:true後問題解決!

var mySwiper = new Swiper ('.swiper-container', {         pagination: '.swiper-pagination',         autoplay: 5000,         loop: true,         observer:true,//修改swiper自己或子元素時,自動初始化swiper     observeParents:true,//修改swiper的父元素時,自動初始化swiper

 }) 

轉:https://www.cnblogs.com/demoworld/p/5977799.html

如果遇到滑動時把第一張隔過去了,可以把初始化寫在ajax成功回撥中。

2.在動態獲取資料後馬上對swiper進行初始化

$.ajax({
    type:"get",
    url:finalUrl,
    dataType:"json",
    success:function(data){
        $("#reportList").empty();
        for(var i=0;i<reportLength;i++){
            var url="'"
+"reportDetial.html"+location.search+"&noticeId="+reportList[i].id+"'"; reportHtml+='<div class="swiper-slide report-item" onclick="reportJump('+url+')">' +'<div class="item-title">'+data.resp[i].title+'</div>' +'<div class="item-content">'
+data.resp[i].content+'</div>' +'<div class="item-date">'+data.resp[i].createTime+'</div>' +'</div>'; } $("#reportList").append(reportHtml); var swiper = new Swiper('.swiper-container', { slidesPerView : 3,
。。。。。。。 }); } });

相關推薦

使用swiper 外掛ajax 請求載入圖片無法滑動

因為banner圖是動態建立的,在外掛開始初始化時,文件流中沒用圖片,故沒有建立相應寬度,通過調整js載入順序,問題還是沒有解決。最後找到swiper外掛 api 有屬性是可以根據內容變動,自動初始化外掛的,新增observer:true後問題解決! var mySw

在同一個頁面中多次使用swiper 外掛要避免相互影響

在專案中使用輪播是很常見的,swiper 就是其中之一,pc 端,移動端都可以使用,效果還是不錯的;曾經在寫一個頁面的時候,其中有兩個輪播圖,於是都用swiper 來寫了,寫完之後發現顯示的效果不是預期的效果,有很大的問題;後來檢查發現兩個輪播圖相互影響了,樣式啥的衝突了,因

vue中插入swiper外掛

建立vue專案流程這裡就不用廢話了吧?還不知道就在我前幾篇中有寫。今天我們的大屏專案中有了一個新的需求,資料模組的切換,毫無疑問,swiper外掛不二之選。原生的寫法官網直接給了,那麼這裡介紹一下在vue中使用swiper外掛的方法。<link rel="stylesh

vue中引用swiper外掛

有時候我們需要在vue中使用輪播元件,如果是在vue元件中引入第三方元件的話,最好通過npm安裝,從而進行統一安裝包管理。 申明:本文所使用的是vue.2x版本。 通過npm安裝外掛: npm install swiper --save-dev 在需要使用swiper的元件裡引入swiper

Vue專案中vue-awesome-swiper外掛使用例項:

源自開源專案:http://github.crmeb.net/u/blue 1,引入外掛 import { swiper, s

新版Glide載入圖片佔位符placeholder失效的解決方案

我使用的是當前最新的Glide4.8.0的版本,想要設定在載入圖片過程中顯示預設圖片的功能,網上查到的設定placeholder,但實際發現這個屬性爆紅無法使用。 解決方案: Glide .with(this) .load(PHOTO_URL) .apply(new Request

C#載入圖片對同一圖片絕對路徑沒問題相對路徑報錯。

讀取圖片時的路徑無外乎有兩種:1:絕對路徑。2:相對路徑。開發過程中絕大多數情況應使用相對路徑。但在讀取圖片時,有時使用相對路徑會報錯,而使用絕對路徑則沒問題。 解決方案:前提是路徑設定正確,在VS中右鍵點選圖片的屬性<複製到輸出目錄>: 不復制------&g

LaTeX TeXworks編輯器插入.eps圖片無法識別的副檔名eps

LaTeX TeXworks編輯器有許多編譯器,預設所用的編譯器是pdfLaTeX+MakeIndex+BibTex,由於pdfLaTeX不支援.eps圖片。 簡單迅速的解決方法是: 切換TeXworks編輯器的編譯器,切換成XeLaTeX+MakeIndex+

swiper圖片外掛

一、swiper簡介 實現圖片輪播的幻燈片的效果的外掛有很多,如touchsiler,Swiper,silerbox等等,各有獨自的API和自定義效果。下面要說的是關於swiper的使用。 Swiper 是一款免費以及輕量級的移動裝置觸控滑塊的js框架,使用硬

詳解swiper圖的各種坑以及呼叫ajax實現效果

Swiper常用於移動端網站的內容觸控滑動,對於前端開發人員來說使用swiper可以提高工作效率,不再需要寫太多的程式碼,輕輕鬆鬆的實現想要的效果,工作中最常用的就是輪播圖了,下面我來說說如何寫一個簡單的輪播圖: 1、首先需要下載一個swiper.css檔案和一個swiper.js檔案,到時候直

側拉+TabLayout切換fragment+Viewpager圖小圓點和圖片上顯示標題+多條目+上拉載入+下拉重新整理

1.MainActivity主頁面 package com.example.zonghelianxi01; import android.annotation.SuppressLint; import android.support.annotation.Nullable; impor

swiper (圖) 外掛的使用

<link rel="stylesheet" href="./swiper-4.4.1/dist/css/swiper.min.css"> <script src="./swiper-4.4.1/dist/js/swiper.min.j

兩款響應式的圖片外掛 rem字型設定

輪播:1http://www.w3cways.com/1796.html 輪播2:http://www.w3cways.com/1542.html rem字型設定;http://www.w3cways.com/1713.html 向上滑動效果:http://www.w3c

一個簡單的jquery圖片外掛

前提佈局: 左浮li標籤,支援左右切換,自動輪播,原始碼: 引數:ul: 需要動畫的ul   prev:上一個切換按鈕  next: 下一個切換按鈕function rotation(ul, prev, next) { var li = $(ul).find("li

15個超強的jQuery/HTML5圖片外掛

最近我們為大家分享過不少基於jQuery的圖片輪播外掛,當然也有很多使用了HTML5和CSS3的相關技術,讓整個圖片播放器顯得更加美觀,動畫效果顯得更加炫酷。這次我們特意為大家篩選了一些最新的jQuery/HTML5圖片輪播外掛,每一個的功能都比較強大,當然可能

外掛--Flexslider圖片、文字圖片相結合滑動切換效果

Flexslider是一款基於的jQuery內容滾動外掛。它能讓你輕鬆的建立內容滾動的效果,具有非常高的可定製性。開發者可以使用Flexslider輕鬆建立各種圖片輪播效果、焦點圖效果、圖文混排滾動效果。 Flexslider具有以下特性: 支援滑動和淡入淡出效果

關於使用圖片外掛無法實現效果的問題

在xdcms上,要在產品頁中使用相簿特效的圖片輪播,可是用了好幾個外掛,輪播的效果始終無法實現,最後我把相關的js程式碼放在頁面的最底部,效果居然出來了,是什麼原因我也沒弄清楚,不過上一次也是這種情況,也是在xdcms上

vue中v-for迴圈載入問題導致vue-awesome-swiper失效問題

<swiper v-if="bannerList.length>0" :options="swiperOption" ref="mySwiper"> <!-- slides --> <swiper-slide v-fo

jQuery 3D旋轉圖片外掛imageflow.js

下載地址 演示地址 相容IE6-11 外掛描述:3D旋轉圖片輪播效果(支援滾輪) 引數設定說明: aspectRatio: 1.964, /* ImageFlow的高度 */

bootstrap外掛carousel圖片切換移動速度自定義

有時候需要圖片消失速度不是那麼快,但是bootstrap預設是0.6s,真是太快了,這麼改 1.在bootstrap.min.css中找到下面程式碼(可直接搜尋transform-3d一下子找到) @media all and (transform-3d), (-webki