swiperH5的引入和编辑方法

最新推荐文章于 2023-10-16 17:25:01 发布
最新推荐文章于 2023-10-16 17:25:01 发布
阅读量263 收藏
点赞数 1
文章标签： javascript css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_18390335/article/details/124844206
版权 
<!DOCTYPE html>
<html>

<head>
	<!-- 轮播图查看 -->
    <!-- 引入 Swiper -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.0.0/css/swiper.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.0.0/css/swiper.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.0.0/js/swiper.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.0.0/js/swiper.min.js"></script>
	<!-- 轮播图查看 -->
</head>
<body>
<div class="popup Jpopup-signature"  style="z-index: 99999999;">
<div class="swiper-container" >
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<img width="100%" preview="index" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=160667318,600554167&fm=26&gp=0.jpg" alt="">
						<div class="swiper_botton">
							<div style="border-radius:1rem ;"  class="swiper-button-prev "  >上一张</div>
							<div style="border-radius:1rem ;" class="swiper-button-next">下一张</div>
							<a class="  open-popup" href="javascript:;" data-type="图片确认"   id="contractFile" data-popup=".Jpopup-signature">
								<div style="border-radius:1rem ;"  class="Jto-signaNaxt">签字确认</div>
							</a>
							<!-- <div class="swiper-button-prev" slot="button-prev"></div> 
							<div class="swiper-button-next" slot="button-next"></div>  -->
						</div>  
					</div>
					<div class="swiper-slide">
						<img  preview="index" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=160667318,600554167&fm=26&gp=0.jpg" alt="">
						<div class="swiper_botton" >
							<div style="border-radius:1rem ;"  class=" pswp__button--arrow--leftb-white " id="Jbon_prevshow"  data-index="{{index}}" >上一张</div>
							<div style="border-radius:1rem ;" class=" pswp__button--arrow--rightb-white " id="Jbon_nextshow" data-index="{{index}}">下一张</div>
							<a class=" open-popup" href="javascript:;" data-type="图片确认"   id="contractFile" data-popup=".Jpopup-signature">
								<div style="border-radius:1rem ;" >签字确认</div>
							</a>
						</div>  
					</div>
					<div class="swiper-slide">
						<img  preview="index" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3421598919,2728197554&fm=26&gp=0.jpg" alt="">
						<div class="swiper_botton" >
							<div style="border-radius:1rem ;"  class=" pswp__button--arrow--leftb-white bg-white   p-l-r-10 p-b-3 p-t-3  " id="Jbon_prevshow"  data-index="{{index}}" >上一张</div>
							<div style="border-radius:1rem ;" class=" pswp__button--arrow--rightb-white bg-white   m-l-r-10 p-l-r-10 p-b-3 p-t-3" id="Jbon_nextshow" data-index="{{index}}">下一张</div>
							<a class="  open-popup" href="javascript:;" data-type="图片确认"   id="contractFile" data-popup=".Jpopup-signature">
								<div style="border-radius:1rem ;">签字确认</div>
							</a>
						</div>  
					</div>
				</div>
			  </div>
			  <div class="swiper-pagination"></div>  
			</div>
<body>

<script type="text/javascript">
		$(function (){
		//点击方法 我这里是用了一个蒙层，这样就像一个效果
        $('.Jpopup-swiperbox').one('opened', function(e) {
			let $that = $(this)
				// swiper的内容
			var swiperCarousel = new Swiper('.swiper-container', {
				// autoplay: true,//可选选项，自动滑动
				loop: true,
				zoom : {
					containerClass: 'swiper-slide',
				}, //开启缩放功能
				navigation: {//左右按钮 我是自定义定位到的

					nextEl: '.swiper-button-next',

					prevEl: '.swiper-button-prev',

				},
			});	
		})
	}
</script >
</html>

效果图：点击后显示一个，可以使用按钮点击
在这里插入图片描述

隐密修罗
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
H5页面（五）效果轮播图之-------swiper.js插件
斗师——Ace
08-02 5337
添加小程序，兑换各种视频教程/数据资源。 swiper是一款轻量级移动设备滑块的js框架！ swiper 3.x主流偏向移动设备！ 注意：npm install --save swiper;需要以下方式引入： 第一步：import Swiper from "swiper" 第二步：import 'swiper/dist/css/swiper.css' //因为npm打包的sw...
涨芝士：swiper在原生H5中的灵活运用
票票的博客
08-14 390
如何引入swiper <link href="https://cdn.bootcss.com/Swiper/4.5.1/css/swiper.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/Swiper/4.5.1/js/swiper.min.js"></script> <div class="swiper-container" id="swiper"> <div cl
h5使用swiper示例
weixin_46337813的博客
03-03 897
<script src="/public/static/index/assets/js/Swiper-4.0.7/swiper.min.js"></script> <script> $(function () { FastClick.attach(document.body); var mySwiper = new Swiper('.swiper-container', { ...
Swiper引入
A_man_of_ideas的博客
05-10 444
2.只需要文件夹里面的swiper-bundle.min.css和swiper-bundle.min.js。1.获取Swiper => 下载Swiper => 点击下载相应的文档 => 随便下载一个最新的就可以。6.如果还需要其他功能就去 API文档 => 配置选项里面查找 需要什么功能就点击进去查看。7.然后再把下面的功能代码引入到代码中就可以了 如果觉得公共不是想要的效果可以自己修改。4.添加HTML（如果不需要的功能可以删掉）5.添加JS（不需要的功能也一同删掉）
Vue脚手架中swiper插件的引入方式
qq_42089654的博客
08-05 3284
一、安装swiper插件 1、打开终端，进入vue-cli脚手架搭建的项目中             cd xx/xx/xxx/xxx 2、安装swiper插件             npm install swiper  3、跑起来            npm run dev 二、swiper的使用 注意：在package.json中查看自己的swiper版本，然后想要什么效...
swiperH5毕业季源码
08-27
本源码集为"swiperH5毕业季源码"，提供了完整构建毕业季主题H5页面所需的所有源代码。Swiper的主要功能包括轮播图、幻灯片切换、触摸滑动控制等，适用于制作各种互动式网页内容，如产品展示、活动宣传、电子相册等。...
微信小程序之swiper轮播图中的图片自适应高度的方法
12-02
将计算出的`swiperH`值通过`setData`方法更新到`Height`属性上，这样Swiper的高度就会动态地根据屏幕宽度和图片比例进行调整。 最后，关于`<image>`标签的一个小技巧是，由于`<image>`标签默认的`display`属性是`...
Pocket:收录日常发现的好的文章和资源
05-11
图片在线压缩好玩 爆炸糖果一些做得比较好的m站国内站微博华住国外站插件库视差滚动插件SUPERSCROLLORAMAjohnpolacek/superscrollorama幻灯/切换qiqiboy/pageSwitchnolimits4web/SwiperH5fullscreenpage.js动画...
微信小程序3D轮播实现代码
10-16
在`getHeight`函数中，获取图片的高度和宽度，然后根据屏幕宽度计算适应的图片高度，并设置到`swiperH`，确保图片在不同设备上都能正确显示。 通过以上的讲解，我们可以了解到微信小程序实现3D轮播图的关键在于合理...
swiper h5手机页面
04-18
swiper h5手机页面 全屏滚动
H5——必备之使用swiper.js、常规且带点好看配置
weixin_45629623的博客
03-28 701
这是H5项目用的最多的了，最近重新用上有些忘记，还是写出来方便查看基本的，也帮助其他人 HTML部分 这是pug的语法，不写标签名默认即div了，也很好看懂，主要是看层级关系。需要分页器，就要写上一个<div class=".swiper-pagination ">即可 上下页同理。 .swiper-container //最外层 .swiper-wrapper //主要显示层 .swiper-slide /
第三十五篇 Swiper 引入使用
灵魂学者的博客
11-21 2004
本篇记录的时swiper的引入和使用；对于Swiper来说，相信有很多人都不默认了，也有使用过swiper插件的，封装过类似的组件，Swiper的一个使用是非常广泛的，是开源免费、非常强大的一个触摸滑动组件，最典型的就是轮播图了；
html里面怎么引入swiper,JavaScript库——使用swiper.js创建嵌套的swiper
weixin_34632164的博客
07-01 1087
相信在项目中使用过swiper.js的同学会跟我一样，觉得这个软件真的很好用。首先API调用简单，其次就是他的官方文档写得非常之详细，非常容易上手。自己在项目中使用swiper.js很长时间了，这里根据自己的一些经验和心得对swiper.js进行总结。swiper.js官网嵌套两个或多个siwper根据官方文档，我们创建一个swiper是非常简单的，但是如何创建两个swiper，这对于一些新手小白...
引入第三方库Swiper来写轮播
weixin_34273479的博客
04-14 307
1. CRM 2. 步骤 1. 进入 Swiper 官网 http://idangero.us/swiper/get-started/ 2. 安装 Swiper 这里选择1b的方式： 引入css 和 script link链接选择：<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swi...
h5-Swiper触摸滑动插件
宇哥大男神的博客
05-15 934
项目要做轮播banner，用这个常用Swiper。 首先导入下js文件。 这里我没有用cdn的方式引入，直接下载放到本地了 <script src="/scripts/swiper.min.js"></script> <body> <div class="swiper-container"> <div class="swiper-wr...
H5轮播图 Swiper 的使用
qq_41596554的博客
10-12 1276
H5轮播图
使用h5 swiper的loop属性时候踩坑
u012439689的博客
11-03 1446
swiper 开启 loop 循环时，复制dom导致的复制的slide上的交互无效问题解决
h5端自动滑动轮播效果实现
最新发布
qq_33593958的博客
10-16 629
delay:1000, // 自动轮播时间尽可能的小（实际情况而定）一、客户需要的效果图。
如何在vue2项目中使用Swiper5组件
m0_46339022的博客
12-14 2844
之前做的业务需要在vue2中插入一个Swiper组件，但是尝试了很多次都一直失败，官方文档和能搜索到的方法也对我不太有用，总是报错！在vue2项目中，Swiper5相对来说更好使用。Swiper7的默认容器是’.swiper’，Swiper6之前是’.swiper-container’。，但讲的是Swiper7/Swiper8在vue3中的使用，不适用于vue2项目。这一步用到了Swiper的真实DOM结构，在vue项目里应该写在生命周期。的项目，并想在其中插入Swiper组件，可以继续阅读这篇文章。
vue-awesome-swiper h5轮播
07-27
vue-awesome-swiper是一个第三方库，可以用来实现移动端和PC端的滑动操作，非常方便。你可以在官方文档\[1\]中找到更多关于vue-awesome-swiper的信息。如果你想在Vue2项目中使用vue-awesome-swiper，你可以通过npm安装swiper和vue-awesome-swiper\[2\]。在安装完成后，你可以在你的Vue组件中全局引入vue-awesome-swiper\[3\]。这样你就可以在H5页面中使用vue-awesome-swiper来实现轮播效果了。希望对你有帮助！ #### 引用[.reference_title] - *1* *3* [Vue 之 插件 轮播组件 vue-awesome-swiper 的简单使用整理](https://blog.csdn.net/u014361280/article/details/126483457)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [Swiper、vue-awesome-swiper 插件使用](https://blog.csdn.net/weixin_74285634/article/details/131384268)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值