轮播图插件swiper

最新推荐文章于 2024-09-21 20:57:10 发布

daydaymiddle

最新推荐文章于 2024-09-21 20:57:10 发布

阅读量2.4k

点赞数

分类专栏：前端开发文章标签：轮播图 swiper

本文链接：https://blog.csdn.net/daydaymiddle/article/details/72866667

版权

前端开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

刚用swiper做轮播图的时候，我一直做不出来，后来发现原来我只引入了swiper的js,没有引入swiper的css.
这两个都是必须引入的，而jquery库无论有没有都能运行swiper.
基本结构示例：

            <!--大图开始-->
             <style>  
            img{width:100%;}
            .swiper-container {
                float:left;
                width: 50%;
                height: 280px;

            }
             </style>
             <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="images/timg.jpg"></div>
                    <div class="swiper-slide"><img src="images/timg.jpg"></div>
                    <div class="swiper-slide"><img src="images/timg.jpg"></div>
                    <div class="swiper-slide"><img src="images/timg.jpg"></div>
                    <div class="swiper-slide"><img src="images/timg.jpg"></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" style="bottom:40px;"></div>
                <!-- Add Arrows -->
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>

            <!-- Swiper JS -->


            <!-- Initialize Swiper -->
            <script>
            var swiper = new Swiper('.swiper-container', {
                pagination: '.swiper-pagination',
                nextButton: '.swiper-button-next',
                prevButton: '.swiper-button-prev',
                paginationClickable: true,
                spaceBetween: 30,
                centeredSlides: true,
                autoplay: 2500,
                autoplayDisableOnInteraction: false
            });
            </script>
            <!--大图结束-->

这就是最基本的用法了。