swiper怎么在HTML引入JS文件,Swiper.js插件超简单实现轮播图

缺乏、安全感 2022-10-07 04:44 251阅读 0赞

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。超好用

话不多说，直接上教程

1、首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。可下载Swiper文件或使用CDN。

请勿直接引入Swiper中文网的文件

2、CSS样式

.swiper-container \{

//你可以在这里设置宽高

width: 50%;

height: 50%;

.swiper-slide \{

text-align: center;

font-size: 18px;

background: \#fff;

/\* Center slide text vertically \*/

display: flex;

\-webkit-box-pack: center;

\-ms-flex-pack: center;

\-webkit-justify-content: center;

justify-content: center;

\-webkit-box-align: center;

\-ms-flex-align: center;

\-webkit-align-items: center;

align-items: center;

img\{

width:250px;

3、HTML

![Image 1][]

//添加图片

4、javaScript

var swiper = new Swiper('.swiper-container', \{

spaceBetween: 30,

centeredSlides: true,

autoplay: \{

delay: 2500,

disableOnInteraction: false,

\},

pagination: \{

el: '.swiper-pagination',

clickable: true,

\},

navigation: \{

nextEl: '.swiper-button-next',

prevEl: '.swiper-button-prev',

\},

\});

效果图

![d110c9101c0d7f7331067be485bf50d8.png][]

你只需要替换一下图片，和修改一下图片及轮播图的大小就可以轻轻松松写出一个很棒的轮播图，怎么样是不是很简单

补充：怎么用swiper实现匀速无缝轮播

1.设置属性

freeMode:true,

autoplay: \{

delay:0

2.然后再修改或者覆盖样式

.swiper-container-free-mode>.swiper-wrapper \{

\-webkit-transition-timing-function: linear; /\*之前是ease-out\*/

\-moz-transition-timing-function: linear;

\-ms-transition-timing-function: linear;

\-o-transition-timing-function: linear;

transition-timing-function: linear;

margin: 0 auto;

补充2：移动端swiper.js中的坑

步骤：

1，渲染日历：日历是自己开发的(注意几点：1，获得当前日期；2，一个月多少天；3，闰月情况；4，每个月1号是礼拜几；。。。)

2，因项目比较近，所以采用了swiper.js控件来做滑动效果；

问题：

1，首先遇到的是在ios上测试是没有问题的，包括UC，百度等浏览器；不过在魅族，华为手机上测试出现问题了-----不能来回切换；

解决方法：考虑到应该是兼容性问题，于是乎查找swiper.js官方文档，因为当时只是引用了swiper.js，而没有引入swiper.css和swiper.animate.js；

重新引入后，ok了，问题得到解决；

2，引入需要的文件后，发现ios和安卓浏览器是没有问题的，但是，安卓app里又出现问题了，来回切换不流畅，此时自己也是百度了一下，没有找到解决方法

最后还得看官方文档，查看属性和方法

解决方案：

// 轮播图--左右滑动和切换

var mySwiper = new Swiper('.swiper-container',\{

pagination: '.pagination',

loop:false,

mode: 'horizontal',

freeMode:false,

touchRatio:0.5,

longSwipesRatio:0.1,

threshold:50,

followFinger:false,

observer: true,//修改swiper自己或子元素时，自动初始化swiper

observeParents: true,//修改swiper的父元素时，自动初始化swiper

onSlideChangeEnd:function(swiper)\{ // 当滑动结束后---月份日期切换同步左右左右切换

changeMonth();

\});

注意：初始化的时候添加的这几个属性，有不明白的可以查看官方文档；

温馨提示：swper.js我用的3xxx版本以上的，各个版本差别还是挺大的！

到此这篇关于Swiper.js插件超简单实现轮播图的文章就介绍到这了,更多相关Swiper.js 轮播图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

[Image 1]: 
[d110c9101c0d7f7331067be485bf50d8.png]: /images/20221005/ab709ff5600945229875da6d9c40553e.png

swiper怎么在HTML引入JS文件,Swiper.js插件超简单实现轮播图

发表评论取消回复

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

相关阅读

相关简单使用swiper实现轮播图

相关 html + js 简单实现轮播图

相关纯js实现轮播图插件

相关轮播图实现html,html、css、js实现轮播图

相关 Vue中使用swiper插件实现轮播图

相关 html实现手机端轮播图,swiper移动端轮播图简单实现

相关 swiper怎么在HTML引入JS文件,Swiper.js插件超简单实现轮播图

相关 html简单实现自动轮播代码怎么写,html + js 简单实现轮播图

相关 Swiper插件超简单实现轮播图

相关 vue 轮播图插件vue-awesome-swiper