Boostrap 第八章插件

最新推荐文章于 2022-10-17 21:19:03 发布

LW0512

最新推荐文章于 2022-10-17 21:19:03 发布

阅读量148

点赞数

分类专栏： bootstrap

本文链接：https://blog.csdn.net/LW0512/article/details/109220431

版权

bootstrap 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

插件

1：什么是插件？

插架是别人封装好的js代码，直接可以拿过来引用的。
插架的种类有很多种。
sweiper插架  他是一种轮播插件。

不要滥用插件，不要去网上随便下载插件

2:swiper插架用法：

赋值你sweiper里面所有代码，粘贴到你的页面
引入sweiper页面里面的css和js
改变元素宽高等属性大小，切记不要修改sweiper代码

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html{
				  height: 100%;
			}
			.header{
				width:100%;
				height: 400px;
				background: red;
			}
			/*swiper*/
			.swiper-container {
		      width: 800px;
		      height:500px;
		      position: relative;
		    }
		    .swiper-slide {
		      text-align: center;
		      font-size: 18px;
		      /*background: pink;*/
		      display: -webkit-box;
		      display: -ms-flexbox;
		      display: -webkit-flex;
		      display: flex;
		      -webkit-box-pack: center;
		      -ms-flex-pack: center;
		      -webkit-justify-content: center;
		      justify-content: center;
		      -webkit-box-align: center;
		      -ms-flex-align: center;
		      -webkit-align-items: center;
		      align-items: center;
		    }
		    .swiper_wrap{
		    	width:100%;
		    	height: 100%;
		    	/*overflow: hidden;*/
		    }
		    .oimgparn>img{
		    	display: block;
		    	width: 100%;
		    }
		    .sweiper_button1{
		    	position: absolute;
		  		z-index: 888;
		  		top:220px;
		  		left:0;
		  		width: 40px;
		    	height: 80px;
		    	background: blue;
		    }
		   
		</style>
	</head>
	<body>
	<div class="header"></div>
		<!--swiper-->
	<div class="swiper-container">
		<div class="swiper-wrapper swiper_wrap">
		  <div class="swiper-slide oimgparn">
		  	<img src="img/1.jpg"/>
		  </div>
		   <div class="swiper-slide oimgparn">
		  	<img src="img/2.jpg"/>
		  </div>
		   <div class="swiper-slide oimgparn">
		  	<img src="img/3.jpg"/>
		  </div>
		 
		</div>
		<!-- Add Pagination -->
		<div class="swiper-pagination"></div>
		<!-- Add Arrows -->
		<div class="swiper-button-next sweiper_button1">
			<span>></span>
		</div>
		<div class="swiper-button-prev sweiper_button2">
		</div>
	</div>
	<div id="" style="width:100%;height: 1000px;background: #ccc;">
		
	</div>
	</body>
	<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
	var swiper = new Swiper('.swiper-container', {
      spaceBetween: 30,
      centeredSlides: true,
      autoplay: {
        delay: 200,
        disableOnInteraction: false,
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
	</script>
</html>

LW0512

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Boostrap 第八章插件

插件1：什么是插件？插架是别人封装好的js代码，直接可以拿过来引用的。插架的种类有很多种。sweiper插架他是一种轮播插件。不要滥用插件，不要去网上随便下载插件2:swiper插架用法：赋值你sweiper里面所有代码，粘贴到你的页面引入sweiper页面里面的css和js改变元素宽高等属性大小，切记不要修改sweiper代码实例：<!DOCTYPE html><html> <head> <meta charset="UTF
复制链接

扫一扫