swiper轮播图代码实例

来源：互联网发布：数据线带磁环的作用编辑：程序博客网时间：2024/04/29 05:37
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <link rel="stylesheet" href="http://www.swiper.com.cn/dist/css/swiper.min.css">        <style>            .swiper-wrapper{                border:1px red solid;                width:1200px;                height:500px;            }            .he{                width:100%;                height:100%;            }            .a{                padding:10px 40%;            }        </style>    </head>    <body>        <div id="banner" style="margin-top:0px; "><!--轮播-->            <div class="swiper-container">                <div class="swiper-wrapper">                    <div class="swiper-slide">                        <img   class='he' src="http://www.swiper.com.cn/demo/img/nature4.jpg" alt="">                    </div>                    <div class="swiper-slide">                        <img class='he'  src="http://www.swiper.com.cn/demo/img/nature2.jpg" alt="">                     </div>                    <div class="swiper-slide">                         <img  class='he' src="http://www.swiper.com.cn/demo/img/nature3.jpg" alt="">                    </div>                </div>                <div class="swiper-pagination"></div>                <!-- 如果需要导航按钮（左右箭头） -->                <div class="swiper-button-prev"></div>                <div class="swiper-button-next"></div>                 <!--<div style="border: 1px solid red;">-->            </div>        </div>        <script src="http://www.swiper.com.cn/dist/js/swiper.min.js" ></script>        <script type="text/javascript">            var mySwiper = new Swiper ('.swiper-container', {            pagination: '.swiper-pagination',            nextButton: '.swiper-button-next',            prevButton: '.swiper-button-prev',             //点击圆点切换            paginationClickable: true,            spaceBetween: 30,            centeredSlides: true,            autoplay: 3000,            autoplayDisableOnInteraction: false,            direction: 'horizontal',            resizeReInit: true,            lazyLoading: true,            preloadImages: false,            updateOnImagesReady: true,            paginationClickable: true,            spaceBetween: 0,            slidesPerColumn: 1,            speed: 600,            loop: true,            initialSlide: 0,            visibilityFullFit: true          })        </script>           <div class='a'><a href="http://www.swiper.com.cn">swiper官网http://www.swiper.com.cn</a></div>    </body></html>
1 0