js-swiper-分页标签加进度条-自定义位置加进度条_swiper进度条,swiper进度条资源-CSDN文库

共3个文件

js：1个

html：1个

css：1个

swiper

5星 · 超过95%的资源需积分: 2 93 浏览量 2022-07-30 09:10:32 上传评论 1 收藏 42KB RAR 举报

资源详情

资源评论

资源推荐

收起资源包目录

swiper.rar （3个子文件）

swiper

index.html 4KB

swiper-bundle.min.js 140KB

swiper-bundle.min.css 16KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Swiper demo</title> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />  <link rel="stylesheet" href="js/swiper-bundle.min.css" />  <style> html, body { position: relative; height: 100%; } body { background: #eee; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: #000; margin: 0; padding: 0; } .swiper { width: 100%; height: 100%; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ 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-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } .swiper-slide::before{content: '';left:0px;top:0px;width: 100%;height: 2px;background:#000;position:absolute; transform:scaleX(0); transform-origin:left; z-index:3; transition-timing-function:linear; } .swiper-slide-active::before{animation:middle 5s;} .swiper-pagination-bullet{ background:none; opacity:1; margin:0 6px !important; width:60px; height:9px; position:relative; outline:none; vertical-align:middle;} .swiper-pagination-bullet span{ width:60px; height:3px; background:#CCC; display:block; margin-top:3px; } .swiper-pagination-bullet i{ background:#000; height:3px; width:60px; position:absolute; top:4px; transform:scaleX(0); transform-origin:left; z-index:3; transition-timing-function:linear; } .swiper-pagination-bullet-active i{ animation:middle 5s;/*swiper延时的时间*/ } @keyframes middle{ 0% {transform:scaleX(0);left:0px;}/*1091*/ 100% {transform:scaleX(1);left:0px;} /*0913*/ } </style> </head> <body>  <div class="swiper mySwiper"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 4</div> <div class="swiper-slide">Slide 5</div> <div class="swiper-slide">Slide 6</div> <div class="swiper-slide">Slide 7</div> <div class="swiper-slide">Slide 8</div> <div class="swiper-slide">Slide 9</div> </div> <div class="swiper-pagination"></div> </div>  <script src="js/swiper-bundle.min.js"></script>  <script> var swiper = new Swiper(".mySwiper", { autoplay:{ delay:5000 }, pagination: { el: '.swiper-pagination', clickable :true, renderBullet: function (index, className) { return '<div class="' + className + '"><span></span><i></i></div>'; }, }, }); </script> </body> </html>