var swiper = new Swiper('.swiper-container', { ——請勿全部復制，根據需要添加子項spaceBetween: 30, //slide之間距——間距30resistanceRatio : 0,//禁止反彈slidesPerView: 'auto', //多列——寬度自動slidesPerGroupSkip: 3, //設置 前n個不列入分組 ——前3個不列入分組，將單獨出現slidesPerView: 4, // 多列——一屏顯示4列centeredSlides: true, // 多列居中顯示slidesPerGroup: 3, //多列分組，一次滾動一組——分3組freeMode: true, // 多列任意滾動slidesPerColumn: 2, //多行 —— 一屏顯示2行loop: true, //開啟循環滾動，從頭尾相接loopFillGroupWithBlank: true, //循環滾動相接處填充空白區分頭尾autoplay: { //自動切換delay: 2500, //時延disableOnInteraction: false,},lazy: true, //懶加載direction:vertical, //滾動方向 vertical：垂直 horizontal：水平autoHeight: true, //滾動高度自動effect: 'fade', //切換效果-淡入淡出effect: 'flip', //切換效果-翻轉effect: 'coverflow', //切換效果-歌曲封面效果 coverflowEffect: { //歌曲封面效果設置rotate: 50,stretch: 0,depth: 100,modifier: 1,slideShadows : true,},effect: 'cube', //3D立體切換效果cubeEffect: { //3D立體切換效果設置shadow: true,slideShadows: true,shadowOffset: 20,shadowScale: 0.94,},parallax: true,//開啟視差滾動 ——以下為視差html設置，data-swiper-parallax是出現時間/*<div class="swiper-slide"><div class="title" data-swiper-parallax="-300">Slide 1</div><div class="subtitle" data-swiper-parallax="-200">Subtitle</div><div class="text" data-swiper-parallax="-100"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.</p></div></div> */grabCursor: true, //鼠標樣式變抓手keyboard: { enabled: true }, //鍵盤控制，上下左右navigation: { //左右切換nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},breakpoints: { //根據屏幕調整參數，類似css媒體查詢，可以是分辨率：320，也可以是點密度：@1.00320: { //當屏幕寬度大于等于320slidesPerView: 2,spaceBetween: 10},768: { //當屏幕寬度大于等于768 slidesPerView: 3,spaceBetween: 20},1280: { //當屏幕寬度大于等于1280slidesPerView: 4,spaceBetween: 30}}mousewheel: true, //鼠標滾動切換開啟pagination: { //分頁器 ——請勿全部復制，根據需要添加子項el: '.swiper-pagination'，//綁定分頁元素clickable: true, //可點擊，可拖拽切換dynamicBullets: true, //分頁器大小變化type: 'progressbar', //進度條分頁type: 'fraction', //數字切換 1/10renderBullet: function (index, className) { // 數字分頁 1 2 3 ....return '<span class="' + className + '">' + (index + 1) + '</span>';},},scrollbar: { // 滾動進度條 ，html需要有swiper-scrollbar元素el: '.swiper-scrollbar',hide: true,},// swiper.el.onmouseover = function () {// //鼠標放上暫停輪播// swiper.autoplay.stop();// };// swiper.el.onmouseleave = function () {// swiper.autoplay.start();// }; });

總結

以上是生活随笔為你收集整理的swiper.js使用心得的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。