swiper.js制作酷炫轮播图

最新推荐文章于 2022-11-05 16:33:29 发布

hangGe0111

最新推荐文章于 2022-11-05 16:33:29 发布

阅读量1.4k

点赞数 2

分类专栏： Web 文章标签： javascript

本文链接：https://blog.csdn.net/hangGe0111/article/details/105432167

版权

本文详细介绍了如何利用swiper.js库来创建一款视觉效果出色的轮播图。从HTML布局开始，到实现动态过渡效果，一步步教你打造专业的轮播展示。

摘要由CSDN通过智能技术生成

1.html

<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>swiper制作酷炫轮播图</title>
		<link rel="stylesheet" href="http://www.jq22.com/demo/swiperlbt201810230049/css/swiper.min.css">
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			#certify {
				position: relative;
				width: 1200px;
				height: 408px;
				margin: 50px auto 0;
			}
			
			#certify .swiper-container {
				padding-bottom: 60px
			}
			
			#certify .swiper-slide {
				width: 520px;
				height: 408px;
				background: #fff;
				box-shadow: 0 8px 30px #ddd
			}
			
			#certify .swiper-slide img {
				display: block;
				width: 100%;
				height: 310px;
			}
			
			#certify .swiper-slide p {
				line-height: 98px;
				padding-top: 0;
				text-align: center;
				color: #636363;
				font-size: 1.1em;
				margin: 0;
			}
			
			#certify .swiper-pagination {
				width: 100%;
				bottom: 20px;
			}
			
			#certify .swiper-pagination-bullets .swiper-pagination-bullet {
				margin: 0 5px;
				border: 3px solid #fff;
				background-color: #d5d5d5;
				width: 10px;
				height: 10px;
				opacity: 1;
			}
			
			#certify .swiper-pagination-bullets .swiper-pagination-bullet-active {
				border: 3px solid #00aadc;
				background-color: #fff;
			}
			
			#certify .swiper-button-prev {
				left: -30px;
				width: 45px;
				height: 45px;
				background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD8AAAECCAMAAAB+Ev8qAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAALWUExURQAAAACq3ACq3JmZmZmZmZmZmZmZmZmZmZmZmZmZmQCq3JmZmZmZmQCq3JmZmQCq3JmZmQCq3ACq3JmZmZmZmZmZmZmZmQCq3ACq3ACq3JmZmQCq3JmZmZmZmZmZmZmZmQCq3JmZmZmZmZmZmZmZmZmZmZmZmQCq3ACq3ACq3ACq3ACq3JmZmQCq3JmZmQCq3ACq3ACq3ACq3ACq3ACq3ACq3JmZmZmZmZmZmQCq3JmZmQCq3ACq3JmZmQCq3ACq3ACq3JmZmZmZmQCq3ACq3ACq3ACq3JmZmQCq3ACq3ACq3ACq3JmZmQCq3ACq3ACq3ACq3JmZmZmZmQCq3ACq3ACq3ACq3ACq3ACq3ACq3ACq3ACq3ACq3JmZmZmZmQCq3ACq3JmZmZmZmQCq3JmZmZmZmQCq3JmZmQCq3JmZmZmZmZmZmZmZmZmZmQCq3ACq3ACq3ACq3ACq3ACq3ACq3ACq3JmZmQCq3JmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmQCq3ACq3ACq3ACq3ACq3ACq3JmZmQCq3ACq3JmZmQCq3ACq3JmZmQCq3ACq3ACq3ACq3JmZmQCq3ACq3ACq3ACq3ACq3ACq3ACq3ACq3ACq3ACq3ACq3ACq3JmZmQCq3ACq3ACq3ACq3ACq3ACq3ACq3ACq3ACq3JmZmZmZmZmZmZmZmZmZmZmZmQCq3ACq3ACq3ACq3JmZmQCq3JmZmQCq3ACq3ACq3ACq3JmZmQCq3JmZmZmZmZmZmQCq3ACq3ACq3ACq3ACq3ACq3ACq3ACq3ACq3ACq3JmZmQCq3JmZmZmZmQCq3ACq3JmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmQCq3ACq3ACq3ACq3ACq3ACq3ACq3ACq3ACq3ACq3ACq3ACq3ACq3ACq3ACq3ACq3ACq3ACq3ACq3ACq3ACq3ACq3ACq3ACq3GMFivoAAADxdFJOUwAVKhRzfnCAf33+J3a3Rvxor+x6bi1U+TGmRFRpKCke2QdXdEM0D+IHbzpPW/YCD9fjUALnaXUvDjQdLZRtFv2tXVkOn67yFeu0syxNyCDbH14E7TVe2JB35vMEkUcQVRABQMowMTMTmmtsShkyk6V2sFJ6Bg1kajs8akUSCC4sBQagEhOh4ZkNAZUKCEVyRPgwnnydBTjQeysK9RqsKVZg+kpzmHLauOU2WFZBJntMbXDJU0tRXEtMN7ZOfCA+P9F9HC8oifuL8F0LHhs4PIgjZyIqMyUXY3crcVpbHeAYqj7xC19ISWWj1HhARlzBvKRENlAeAAAJnElEQVR42u1a538TRxMeF/k5WZIbxTa4gQFDqAYbU2y6nVASAgYbA2l0ML0mkEYSSK8kEFKAFJKQ3nvvvffee3v+g3w42Ujy7e6d9L75QZL9pNPs3O7OPTM7u/OIOLd+HTpmBf0WAMsfzOrYoZ94aD3uuMBCdLMumNTDpfYpNXB