swiper动态加载数据（踩坑）

最新推荐文章于 2025-11-04 14:28:18 发布

原创最新推荐文章于 2025-11-04 14:28:18 发布 · 2.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

JQ 专栏收录该内容

27 篇文章

订阅专栏

本文介绍如何使用Swiper插件实现轮播图效果，并通过jQuery进行页面元素的定位调整。同时，展示了如何利用AJAX异步获取数据并将其填充到轮播图中。

html代码：

   <section>
        <div class="law_type">
            <div class="swiper-container">
                <div class="swiper-wrapper  types">
                </div>
            </div>
        </div>
    </section>

JQ代码：

<script>
        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            slidesPerView: 5,
            paginationClickable: true,
            spaceBetween: 1,
            grabCursor: true,
            //添加下面两个属性，就可以进行滚动
            observer: true,//修改swiper自己或子元素时，自动初始化swiper
            observeParents: true//修改swiper的父元素时，自动初始化swiper
        });
        ///延时进行重新定位第一张显示的内容
        setTimeout(function () {
            $(".swiper-wrapper").css("transform", "translate3d(0px, 0px, 0px)")
        }, 50)
    </script>

异步获取数据：

    <script>
        var html = "";
        $.ajax({
            type: 'POST',
            url: 'handlers/ClassifyList.ashx',
            dataType: 'json',
            async: false,//使用同步的方式,true为异步方式
            data: { CaseTypeID: 5 },
            success: function (res) {
                if (res.code == 0) {
                    for (var i = 0; i < res.data.length; i++) {
                       
                    }
                }
            },
        })
        $(".types").append(html);
    </script>