swiper輪播圖

時間 2019-11-20

標籤 swiper 简体版

原文原文鏈接

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">    <title>Title</title>    <link href="js/swiper4-animate-demo/css/swiper.min.css" rel="stylesheet">    <style>        *{            margin: 0;            padding: 0;            box-sizing: border-box;        }        li{            list-style: none;        }        .clearFix:after,        .clearFix:before{            clear: both;            height: 0;            line-height: 0;            visibility: hidden;            display: block;            content: "";        }        .container{            max-width: 640px;            min-width: 320px;            margin: 0 auto;            position: relative;            overflow: hidden;        }        .container>ul:first-child{            /*width: 1000%;*/        }        .container>ul:first-child>li{            /*width: 10%;            float: left;*/        }        .container>ul:first-child>li>a{            display: block;            width: 100%;        }        .container>ul:first-child>li>a>img{            display: block;            width: 100%;        }            </style></head><body><div class="container swiper-container">    <ul class="swiper-wrapper">        <li class="swiper-slide"><a><img src="images/l1.jpg"></a></li>        <li class="swiper-slide"><a><img src="images/l2.jpg"></a></li>        <li class="swiper-slide"><a><img src="images/l3.jpg"></a></li>        <li class="swiper-slide"><a><img src="images/l4.jpg"></a></li>        <li class="swiper-slide"><a><img src="images/l5.jpg"></a></li>        <li class="swiper-slide"><a><img src="images/l6.jpg"></a></li>        <li class="swiper-slide"><a><img src="images/l7.jpg"></a></li>        <li class="swiper-slide"><a><img src="images/l8.jpg"></a></li>    </ul>    <ul class="swiper-pagination"></ul></div><script src="js/swiper4-animate-demo/js/swiper.min.js"></script><script>    $(function () {        /*        * 1.自動輪播        * 2.無縫循環        * 3.指示功能        * */        new Swiper ('.swiper-container', {            autoplay:{                disableOnInteraction: false,            },            loop:true,            // 若是須要分頁器            pagination: {                el: '.swiper-pagination',            },        })    })</script></body></html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。