kineto实现兼容手机自适应幻灯片轮播图效果代码
代码语言:html
所属分类:幻灯片
代码描述:kineto实现兼容手机自适应幻灯片轮播图效果代码
代码标签: kineto 兼容 手机 自适应 幻灯片 轮播图
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/kineto.css"> <style> .carousel { position: relative; width: 100%; margin-bottom: 20px; } .slide { width: 100%; height: 300px; box-sizing: border-box; background-color: rgb(52, 73, 85); line-height: 1.15em; font-size: 3rem; text-align: center; /* transition: background-color .3s; */ } .slide::before, .slide::after, .slide .count { display: inline-block; vertical-align: middle; } .slide::before, .slide::after { content: ''; width: 1px; height: 100%; } .carousel [tabindex]:focus, .carousel button:focus { outline: 0; } .carousel [tabindex='0']:focus, .carousel button:focus { box-shadow: inset 0 0 0 2px rgba(249, 170, 51, 0.6); } .kineto__frame, .kineto-frame { color: rgb(249, 170, 51); background-color: rgb(74, 101, 114); transition: height 0.25s cubic-bezier(0, 0, 0.2, 1); } .kineto .kineto__slide--active, .kineto .kineto-slide.kineto-active { background-color: rgb(35, 47, 52); } .kineto .kineto__arrow__button, .kineto .kineto-arrow-button { position: absolute; top: 50%; color: rgb(249, 170, 51); transform: translate(0, -50%); transition: opacity 0.3s; } .kineto .kineto__arrow__button--previous, .kineto .kineto-previous { left: 1%; } .kineto .kineto__arrow__button--next, .kineto .kineto-next { right: 1%; } .kineto .kineto__pagination, .kineto .kineto-pagination { position: absolute; right: 0; bottom: 20px; left: 0; color: rgb(249, 170, 51); } .kineto .kineto__pagination__button, .kineto .kineto-pagination-button { border-radius: 100%; transition: opacity 0.3s; } .kineto .kineto__pagination__button--active, .kineto .kineto-pagination-button.kineto-active { font-weight: 700; } .kineto .kineto__count, .kineto .kineto-count { position: absolute; top: 10px; right: 15px; color: rgb(249, 170, 51, 0.4); } .kineto .kineto__count .current, .kineto .kineto-count .current { color: rgb(249, 170, 51); font-size: 1.2rem; font-style: normal; } #navigation .kineto__arrow__button, #navigation .kineto-arrow-button { font-size: 1.2rem; } #navigation .kineto__pagination__button, #navigation .kineto-pagination-button { width: auto; height: auto; background: transparent; border-radius: 0; box-sizing: border-box; line-height: 20px; } #sync2 .slide { height: 200px; font-size: 2.5rem; } #sync3 .slide { height: 100px; font-size: 1.75rem; } body { background-color: #fafafa; } h2 { margin: 2rem auto; } .container { margin: 150px auto; } </style> </head> <body> <div class="container"> <h2>Basic Demo</h2> <div id="default" class="carousel"> <div class="slide"> <span class="count">1</span> </div> <div class="slide"> <span class="count">2</span> </div> <div class="slide"> <span class="count">3</span> </div> <div class="slide"> <span class="count">4</span> </div> <div class="slide"> <span class="count">5</span> </div> </div> <h2>Vertical Slider</h2> <div id="vertical" class="carousel"> <div class="slide"> <span class="count">1</span> </div> <div class="slide"> <span class="count">2</span> </div> <div class="slide"> <span class="count">3</span> </div> <div class="slide"> <span class="count">4</span> </div> <div class="slide"> <span class="count">5</span> </div> </div> <h2>Auto Play</h2> <div id="auto" class="carousel"> <div class="slide"> <span class="count">1</span> </div> <div class="slide"> <span class="count">2</span> </div> <div class="slide"> <span class="count">3</span> </div> <div class="slide"> <span class="count">4</span> </div>.........完整代码请登录后点击上方下载按钮下载查看
网友评论0