Swiper实现轮播图效果

2019-11-19 16:11:59

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了Swiper实现轮播图效果的具体代码，供大家参考，具体内容如下

<!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 Swiper's CSS --><link rel="stylesheet" href="../dist/css/swiper.min.css" rel="external nofollow" > <!-- Demo styles --> <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-container { 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; } </style></head><body> <!-- Swiper --> <div class="swiper-container"><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 class="swiper-slide">Slide 10</div></div><!-- Add Pagination --> <div class="swiper-pagination"></div> </div> <!-- Swiper JS --><script src="../dist/js/swiper.min.js"></script><!-- Initialize Swiper --> <script>var swiper = new Swiper('.swiper-container', {//小白点 pagination: '.swiper-pagination', paginationClickable: true });</script> </body> </html>

最后别忘了再打这些东西之前要引Swiper.css和Swiper.js插件哦!

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：利用Vue.js实现求职在线之职位查询功能

下一篇：jQuery实现点击关注和取消功能