swipei实现3D横向焦点图效果

swiper使用

使用swiper的版本是5.4.5版本 “swiper”: “^5.4.5”,
效果图：一共5张图片，显示5张

template部分

      <div class="box"><div class="swiper" id="certify" v-if="countryitems.length > 0"><div class="swiper-container"><div class="swiper-wrapper"><divclass="swiper-slide"v-for="item in countryitems":key="item.guid"><img :src="item.listImage" /></div></div></div></div></div>

js部分

import "swiper/css/swiper.css";
import Swiper from "swiper";updated() {this.swiper = new Swiper(".swiper-container", {autoplay: true, //是否自动播放 true 是  false 否slidesPerView: 2, //一排展示几个effect: "coverflow", //轮播图的切换效果  coverflow 3DcenteredSlides: true, // 设定为true时，active slide会居中，而不是默认状态下的居左。spaceBetween: "-54%", //每个轮播图之间设置距离（单位px）。loop: true, // 是否循环播放pagination: {el: ".swiper-pagination",clickable: true,},coverflowEffect: {rotate: 0, //slide做3d旋转时Y轴的旋转角度stretch: 10, //每个slide之间的拉伸值，越大slide靠得越紧。5.3.6 后可使用%百分比depth: 100, //slide的位置深度。值越大z轴距离越远，看起来越小。modifier: 5, //depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显slideShadows: false, //是否开启slide阴影},observer: true, //修改swiper自己或子元素时，自动初始化swiperobserveParents: false, //修改swiper的父元素时，自动初始化swiperonSlideChangeEnd: function (swiper) {swiper.update();mySwiper.startAutoplay();mySwiper.reLoop();},});},

样式部分

.swiperss {height: 355px;width: 100%;margin: 50px auto;border: 1px solid green;
}
.box {height: 355px;width: 100%;
}
.swiper {margin: 20px;height: 355px;img {width: 558px;height: 355px;}
}
.swiper-container {width: 100%;height: 355px;
}.bird {margin-top: 20px;
}

swipei实现3D横向焦点图效果相关推荐

妙味课堂实战功能开发视频教程 3D翻转焦点图/瀑布流/拖拽购物车/模块化开发等实战教程
<HTML5梦工厂 - 码农俱乐部视频> ├<第八期码农俱乐部-技术之夜-3D翻转焦点图> │ ├1-码农俱乐部技术之夜-3D翻转焦点图_.mkv │ ├2-码农俱乐部技术 ...
jquery点击缩略图切换视频播放的视频切换焦点图效果
一款由jquery实现的视频切换特效,可以像图片切换那样切换所选择的视频来播放,图片切换相对来说较简单,但视频切换的话就需要播放插件的支持,选择视频缩略图后,上边原来显示大图片的地方是显示一个播放器, ...
小程序实现3D轮播图效果
小程序通过swiper标签实现3D轮播图效果一.效果图二.代码块 1.html <view wx:if="{{slideList.length>0}}" class ...
一款类似跑跑卡丁车官方网漂亮的banner焦点图效果
该源码从跑跑卡丁车官方移植过来,采用jquery进行图片轮换动画,效果比较漂亮,大家可以据此来应用到实际网站项目当中去.演示效果图如下所示: 1.主界面html代码: [html ...
左右全屏banner焦点图代码特效+苹果官网首页左右全屏banner焦点图效果+包括JS图片CSS样式等
介绍源码名称:[左右全屏banner焦点图]代码特效+苹果官网首页左右全屏banner焦点图效果+包括JS图片CSS样式等源码大小:16.6KB 开发语言:PHP+Mysql 操作系统:Windo ...
如何使用myFocus插件制作焦点图效果
焦点图分有:flash焦点图 js焦点图 css焦点图 jQ焦点图(其中jQ焦点图以代码量少,实现功能成为首选): myFocus是一款专注于焦点图制作的js插件: 使用步骤:点击下载--Dem ...
微信小程序实现3d轮播图效果（非swiper组件）
首先上一下效果图: 在做的时候首先想到的是用swiper组件但是发现swiper组件放进去图片的时候会没有3d的效果,原因是swiper组件自带的style属性限制了3d效果所需要的属性,所以单独写了 ...
原生js实现简单的焦点图效果
用到一些封装好的运动函数,主要是定时器效果为图片和图片的描述定时自动更换 <!DOCTYPE html> <html><head><meta charset ...
sharepoint中使用xslt构建Spotlight（焦点图效果）
XML <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet type=" ...

swipei实现3D横向焦点图效果

swiper使用

swipei实现3D横向焦点图效果相关推荐

最新文章

热门文章