User:顶呱呱的阿杰/swiper.css：修订间差异

2023年9月19日 (二) 20:59的最新版本

.div{
	width: 100%;
	border: 2px solid black;
}

@@ 第1行： / 第1行： @@
+.div{
+	width: 100%;
-/* 手动轮播样式 */
+	border: 2px solid black;
-.banner-container{
-	width:120px;
-	height:40px;
-	margin:1rem auto;
-	overflow: hidden;
-	position: relative;
-}
-.banner-container .banner-img-container {
-	width:600px;
-	height:40px;
-	overflow: hidden;
-	position: absolute;
-	display: flex;
-	transition: transform 0.6s ease;
-}
-.banner-container .banner-img-container  img{
-	width:100%;
-	height:100%;
-}
-/* 轮播图圆点样式 */
-.banner-container a {
-	width:24px;
-	height:24px;
-	background:#87c8eb;
-	position: absolute;
-	bottom:1rem;
-	border-radius: 100%;
-	margin:0;
-	z-index: 1;
-}
-.banner-container input{
-	width:24px;
-	height:24px;
-	position: absolute;
-	bottom:1rem;
-	margin:0;
-	cursor: pointer;
-	z-index: 2;
-	opacity: 0;
-}
-/* 设置导航圆点偏移量（居中布局）*/
-#banner-control-1,#banner-control-1 + .banner-nav-a{
-    left: 30%;
-}
-#banner-control-2,#banner-control-2 + .banner-nav-a{
-    left: 40%;
-}
-#banner-control-3,#banner-control-3 + .banner-nav-a{
-    left: 50%;
-}
-#banner-control-4,#banner-control-4 + .banner-nav-a{
-    left: 60%;
-}
-#banner-control-5,#banner-control-5 + .banner-nav-a{
-    left: 70%;
-}
-/* 设置高亮 */
-/*当 input 被选中时 他的兄弟级a标签高亮展示*/
-input:checked + .banner-nav-a {
-    background-color: #ad244f;
-}
-/* 设置轮播图动画 */
-#banner-control-1:checked ~ .banner-img-container{
-	transform: translateX(0px);
-}
-#banner-control-2:checked ~ .banner-img-container{
-	transform: translateX(-1200px);
-}
-#banner-control-3:checked ~ .banner-img-container{
-	transform: translateX(-2400px);
-}
-#banner-control-4:checked ~ .banner-img-container{
-	transform: translateX(-3600px);
-}
-#banner-control-5:checked ~ .banner-img-container{
-	transform: translateX(-4800px);
 }