轮播——swiper
swiper组件
1、轮播数据是使用ajax进行填充的话,可能数目是0~n,在数目是1时,轮播会出现一些问题(出现空白侧),这时需作出判断(一张图片不滑动,多张就就行滑动),方法如下(以下方法中,size()不行的话可以换成length):
方案一: 先判断是否只有一个图,是的话初始化时传入不可拖动的参数
var isNoSwiping = false;
if($(".swiper-container .swiper-slide").size() == 1) { //判断有多少张图在内,如果只有一张,初始化时初始化为不可拖动
isNoSwiping = true;
var mySwiper = new Swiper('.swiper-container',{
noSwiping : isNoSwiping,
});
}
方案二 初始化前先判断是否只有一个,若是,不执行初始化函数
if($(".swiper-container .swiper-slide").size() != 1) {
var mySwiper = new Swiper(".swiper-container") ;
}
方案三 初始化后,判断是否只有一个,若是,销毁swiper
var mySwiper = new Swiper('.swiper-container');
if($(".swiper-container .swiper-slide").size() == 1){
mySwiper.destroy(false);
}
使用示例:
// 品牌推荐 start
function getBrand() {
var success = function (json) {
var html = "";
$(json.Rows).each(function (index, item) {
html += ' <div class="swiper-slide" onclick="goUrl(\'brandDetailMore.aspx?brand_id=' + item.brand_id + '&brand_name=' + item.brand_name + '\')"> ';
html += ' <div class="brandBox"> ';
html += ' <div class="brandPicBox"> ';
html += ' <img src="' + item.imgPath + '" /> ';
html += ' </div> ';
html += ' <div class="brandImgBox"> ';
if (IsEmpty(item.brand_logo)) {
html += ' <span>' + item.brand_name + '</span>';
} else {
html += ' <img src="' + item.brand_logo + '" />';
}
html += ' </div> ';
html += ' </div> ';
html += ' </div> ';
}); if (json.Rows.length > 0) {
$(".isShowBrand").show();
$(".brandSwiper .swiper-wrapper").html(html);
} if ($(".brandSwiper .swiper-slide").length <= 2) {
$(".brandSwiper").css("width", "90%");
$(".swiper-slide").css({ "width": "80%", "height": "280px" });
$(".brandBox").css("box-shadow", "0px 0px 1px 1px #dbdbdb inset");
$(".brandSwiper .swiper-slide .brandPicBox").css("height", "70%");
$(".brandSwiper .swiper-slide .brandImgBox").css({ "width": "40%", "height": "30%" });
var mySwiper = new Swiper('.brandSwiper', {
pagination: '.swiper-pagination .brandSwiper',
slidesPerView: '1',
centeredSlides: false,
autoplay: 3000,
speed: 1000,
autoplayDisableOnInteraction: false,
paginationClickable: true
}); } else {
var wheelSwiper = new Swiper(".brandSwiper", {
slidesPerView: 'auto',
centeredSlides: true,
loop: true,
speed: 1000,
autoplay: 3000,
noSwiping: false,
paginationClickable: false,
pagination: '.swiper-pagination .brandSwiper',
autoplayDisableOnInteraction: false,
observer: true,
observeParents: true
});
}
} var par = {
act: "GetPageData",
store_id: tostore,
pagesize: 5,
type_id: type_id
};
//通过yt-public-common-function.js中的公s共请求函数
JsAjax("/Handle/nc_brandHandle.ashx", par, success); }
// 品牌推荐 end
2、关于swiper-slide元素垂直布局,会默认为高度为设备的高度,即使设置每一个元素的具体高度,在滑动时还是会出现空白页,解决方法是在初始化时设定一个高度值,如height: 20。(注意不带单位,效果查证可通过swiper官网例子查看)。
3、使用swiper组件,初始化带有spaceBetween属性,一般UI设计中,左右两边应该是不留白的,或者说滑向的那边是不留白的,但因为前面划过去的元素因spaceBetween而使右边会有些空白间距,*改善页面效果可以通过设置slidesPerGroup:1,每次滑动只滑动一个。(如果slidesPerGroup、slidesPerView一样的话会以组[两个以上]为一轮滑动)。
4、在IOS上,组件设置循环轮播时,最后一张切换会出现闪现,了解到swiper组件有使用到一些CSS3动画效果,如transform3D(0,0,0),可设置hack方法处理闪动问题(transform-style: preserve-3d;backface-visibility:hidden;perspective: 1000注意添加前缀)。
.swiper-wrapper, .swiper-slide {
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-perspective: 1000;
-webkit-perspective: 1000;
perspective: 1000;
}
5、在IOS上,组件设置 swiper-container高度由最长的swiper-slide决定解决方法
6、swiper4
7、swiper可以设置swiper-slide的切换效果
https://www.manongdao.com/article-1291551.html
注意如果设置effect: 'fade' swiper-slide背景色为白色或其它
8、swiper-slide高度不统一时
待续~
轮播——swiper的更多相关文章
- 轮播swiper配置选项
本文主要介绍了swiper配置选项,包含了轮播的无限滚动.懒加载.监听当前位置.上下翻页.过渡动画渐变.延时加载图片.自动轮播等: swiper官方链接DEMO <!DOCTYPE html&g ...
- swiper轮播 swiper整屏轮播
近期坐了几个移动端 整屏轮播的 效果 之前都是自己一个个写,之前听说过swiper插件,没有使用过,今天一尝试,果然,爽 使用方法示例 <div class="swiper-cont ...
- asp.net Swiper 轮播动画
原文:https://blog.csdn.net/qq_39656138/article/details/90451289 官网:https://www.swiper.com.cn/api/index ...
- ReactNative新手学习之路04 组件化开发轮播图swiper支持安卓和IOS
react native 新手之路04 组件化开发轮播图swiper支持安卓和IOS npm install react-native-carousel --save git 地址Properties ...
- swiper轮播图--兼容IE8
//引入idangerous.swiper.min.js var mySwiper = new Swiper ('.swiper-container', { loop: true, paginatio ...
- 视频swiper轮播
关于本次文章的内容,实际上是咪咕阅读详情页中的一个前端需求要做的效果,不过比起原需求,此次案例已经被删减掉许多部分了.音频部分舍弃,调用客户端接口舍弃,并做一些整理.最后留下的是这个精简版的案例.方便 ...
- angularjs中使用轮播图指令swiper
我们在angualrjs移动开发中遇到轮播图的功能 安装 swiper npm install --save swiper 或者 bower install --save swiper 引入文件 ...
- swiper结合ajax的轮播图
Swiper 是什么:是纯JavaScript打造的滑动特效插件,能够实现触屏焦点图.触屏tab切换.触屏多图切换等常用效果. 开源.免费.稳定.应用广泛. 这就是swiper简单的介绍,由于是结合a ...
- Vue与swiper想结合封装全屏轮播插件
项目需求介绍: 1.页面图文混排, 2.点击图片后全屏展示图片,并在底部显示文字,如果没有则不显示 3.关闭全屏后依然停留在上次浏览的位置 4.浏览图片时,不管点击的哪张图片,全屏展示的时候也要显示这 ...
随机推荐
- memcached 能接受的 key 的最大长度是多少?
key 的最大长度是 250 个字符.需要注意的是,250 是 memcached 服务器端内 部的限制,如果您使用的客户端支持"key 的前缀"或类似特性,那么 key(前缀 + ...
- 数据库学习之"清理表内所有数据"
今天在写定时任务的时候表内的数据都出现了问题,所以用了 1 truncate table 表名 来清空表内的数据
- git提交错误 git config --global user.email “you@example.com“ git config --global user.name “Your Name
1 Commit failed - exit code 128 received, with output: '*** Please tell me who you are. 2 3 Run 4 5 ...
- 创建axios拦截器
上一篇说axios并发的时候有提到 axios的请求统一管理是为了创建拦截器 具体说一下拦截器的创建 import Vue from 'vue'; import axios from 'axios'; ...
- [译] 沙箱中的间谍 - 可行的 JavaScript 高速缓存区攻击
原文 The Spy in the Sandbox – Practical Cache Attacks in Javascript 相关论文可在 https://github.com/wyvernno ...
- 记离线缓存(manifest)一大坑,断定其只适用于静态网站或离线应用
今天看了离线缓存(manifest)方面的资料,兴冲冲地就想给自己的网站用上.待我把代码都写好部署上服务器,并测试过OK的时候,在SegmentFault刷了一把manifest方面的问答,才发现这个 ...
- java的内存泄露是如何发生的,如何避免和发现
java的垃圾回收与内存泄露的关系:[新手可忽略不影响继续学习] 马克-to-win:上一节讲了,(i)对象被置成null.(ii)局部对象(无需置成null)当程序运行到右大括号.(iii)匿名对象 ...
- EMS创建独立新用户并分配邮箱
创建新用户"王春海"并分配邮箱. 以Exchange管理员身份登录EMS控制台.在PowerShell命令行提示符下,键入如下命令: [PS] C:\Windows\system3 ...
- 集成JUnit测试
集成JUnit测试 既然使用了Spring,那么怎么集成到JUnit中进行测试呢,首先大家能够想到的肯定是: public class TestMain { @Test public void tes ...
- 纯css 实现动画的暂停和运动
<template> <div> <input id="stop" type="radio" name="p ...