swiper 实现网格滚动

- 日理万妓 2023-01-03 01:44 39阅读 0赞

需求是实现图片像胶卷一样拖动滚动，下面图片命名，为了节省时间，使用了中文，一般不建议使用中文  
实现功能重点不在结构，结构如常

<div class="swiper-container" id="swiper-container" style="margin-top: 1%;">
    	<div class="swiper-wrapper">
    		<div class="swiper-slide">
    			<img src="/blog/pnews/images/aboutus/编组 14.png" alt="" style="width: 50%;">
    		</div>
    		<div class="swiper-slide">
    			<img src="/blog/pnews/images/aboutus/编组 14备份.png" alt="" style="width: 50%;">
    		</div>
    		<div class="swiper-slide">
    			<img src="/blog/pnews/images/aboutus/编组 14备份 2.png" alt="" style="width: 50%;">
    		</div>
    		<div class="swiper-slide">
    			<img src="/blog/pnews/images/aboutus/编组 14备份 3.png" alt="" style="width: 50%;">
    		</div>
    		<div class="swiper-slide">
    			<img src="/blog/pnews/images/aboutus/编组 14备份 4.png" alt="" style="width: 50%;">
    		</div>
    		<div class="swiper-slide">
    			<img src="/blog/pnews/images/aboutus/编组 14备份 5.png" alt="" style="width: 50%;">
    		</div>
    	</div>
    	<div class="swiper-button-prev" id="ban-pre">
    		<img src="/blog/pnews/images/aboutus/Group46.png" alt="" style="position: absolute;left: 468%;top:-100%;">
    	</div>
    	<div class="swiper-button-next" id="ban-next">
    		<img src="/blog/pnews/images/aboutus/Group35.png" alt="" style="position: absolute;right: 468%;top:-100%">
    	</div>
    </div>

重点在属性方法中

var mySwiper = new Swiper('#swiper-container', { 
    	autoplay: true,//可选选项，自动滑动
    	loop: true,
    	navigation: { 
    		nextEl: '.swiper-button-next',
    		prevEl: '.swiper-button-prev',
    	},
    	slidesPerView : 2, // 容器同时显示的数量
    	slidesPerGroup: 2, // 定义slides的数量多少为一组，同时移动俩个
    	breakpoints: { 
    		1920: { 
    			spaceBetween: -420, // 每个slide之间的距离
    			slidesOffsetBefore : -730, // 设定slide与左边框的预设偏移量（单位px）。
    		},
    		1536: { 
    			spaceBetween: -350,
    			slidesOffsetBefore : -583,
    		},
    		1200: { 
    			spaceBetween: -290,
    			slidesOffsetBefore : -445,
    		},
    		1024: { 
    			spaceBetween: -220,
    			slidesOffsetBefore : -390,
    		}
    	}
    })

发表评论取消回复

表情：

评论列表（有 0 条评论，39人围观）

还没有评论，来说两句吧...

相关阅读

相关在swiper页面实现指定区域内容横向滚动的方案

最新更新时间：2020年05月27日16:31:43 [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] > 本文内容：页面部分内容横向滚动固

梦里梦外;/ 2023年02月13日 05:41/ 0 赞/ 6 阅读

相关 swiper 在turn.js不能滚动

这个问题，使用turn.js的同学一定遇到过，那怎么解决呢？答案：翻到对应包含swiper 的那页，重新初始化swiper ![在这里插入图片描述][watermark

我会带着你远行/ 2023年02月10日 08:20/ 0 赞/ 158 阅读

相关 swiper 滚动模式下的Echarts图展示问题

ecahrt位于swiper里面。在微信开发者工具里查看没什么问题，正常拖拽。但是在手机上看的话，要么时echart没有加载出来。要么时位置不对。感觉是swiper样式导致

迷南。/ 2023年01月06日 01:37/ 0 赞/ 95 阅读

相关 swiper 实现网格滚动

需求是实现图片像胶卷一样拖动滚动，下面图片命名，为了节省时间，使用了中文，一般不建议使用中文实现功能重点不在结构，结构如常 <div class="swiper

- 日理万妓/ 2023年01月03日 01:44/ 0 赞/ 40 阅读

相关 swiper-如何将导航变为滚动条样式

本节内容介绍swiper当中如何将导航变为滚动条样式。首先我们搭建一个swiper页面的基本布局。 <div class="swiper-contain

向右看齐/ 2022年09月23日 04:00/ 0 赞/ 343 阅读

相关 Swiper-页面垂直滚动样式

首先按照第一节课的内容，将一个基本的swiper页面实现。然后在初始化的js代码当中添加属性。当然事先不要忘记引用下载好的框架文件。我们先添加翻页导航

小咪咪/ 2022年09月23日 03:59/ 0 赞/ 428 阅读

相关 swiper实现触摸滑动

引入需要的文件 <link href="css/swiper.min.css" rel="stylesheet" type="text/css"

骑猪看日落/ 2022年08月05日 02:43/ 0 赞/ 293 阅读

相关 swiper.js插件实现图片滚动效果

swiper.js插件实现图片滚动效果 1、页面初始化效果： ![Center][] 2、Html如下 <!DOCTYPE html> <ht

偏执的太偏执、/ 2022年06月05日 04:54/ 0 赞/ 447 阅读

相关 swiper横向轮播——阶梯式滚动轮播

Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件，是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。Swipe

Myth丶恋晨/ 2021年12月16日 08:07/ 0 赞/ 1143 阅读

相关 swiper匀速滚动

js var mySwiper = new Swiper('.swiper-container', { autoplay: {

悠悠/ 2021年07月27日 02:21/ 0 赞/ 548 阅读