期权记-ETF期权开户导航 期权记是专业的50ETF300ETF期权开户投资交易导航

利用swiper实现滑动效果

Swiper是一款最近几年前端开发最流行的框架之一,是免费以及轻量级的移动设备触控滑块的框架,使用硬件加速过渡(如果该设备支持的话)。主要使用与移动端的网站、网页应用程序(web apps),以及原生的应用程序(native apps)。主要是为IOS而设计的,同时,在Android、WP8系统以及现代桌面浏览器也有着良好的用户体验。

今天我说一下利用swiper实现滑动效果的示例:

<!DOCTYPE html>      <html>      	<head>      		<meta charset="UTF-8">      		<title></title>      		<link rel="stylesheet" href="../uu/swiper-4.4.1.min.css">      		<style type="text/css">      			.swiper-container {         		width: 1226px;        			height: 300px;        			margin: 100px auto;      		}      		.swiper-container .swiper-wrapper .swiper-slide{      			background: dodgerblue;      			text-align: center;      			line-height: 300px;      			color: white;      			font-size: 30px;      		}      		</style>      	</head>      	<body>      		<div class="swiper-container">      <div class="swiper-wrapper">      <div class="swiper-slide">1</div>      <div class="swiper-slide">2</div>      <div class="swiper-slide">3</div>      <div class="swiper-slide">4</div>      <div class="swiper-slide">5</div>      <div class="swiper-slide">6</div>      <div class="swiper-slide">7</div>      <div class="swiper-slide">8</div>      <div class="swiper-slide">9</div>      <div class="swiper-slide">10</div>      </div>      <!-- 如果需要导航按钮 -->      <div class="swiper-button-prev"></div>      <div class="swiper-button-next"></div>      		<script src="../uu/swiper-4.4.1.min.js"></script>      		<script>              var mySwiper = new Swiper ('.swiper-container', {       	slidesPerView : 5, //网格分布,显示5个格       	slidesPerGroup : 5, //一组为5个格       	spaceBetween : 14, //每个格间隔(距)14像素      direction: 'horizontal', // 垂直切换选项      loop: true, // 循环模式选项      // 如果需要前进后退按钮      navigation: {      nextEl: '.swiper-button-next',      prevEl: '.swiper-button-prev',      },      })      </script>      	</body>      </html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

作者:期权小韭菜 分类:网页教程 浏览:
请先 登录 再评论,若不是会员请先 注册