轮播库-swiper使用案例

Swiper使用案例

记得先请求ajax数据再去渲染界面,否则loop会出现问题。虽然也可以使用observer:true来解决

js 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="lib/swiper-bundle.min.css">
    <script src="lib/swiper-bundle.min.js"></script>

    <script src="lib/jquery.js"></script>

    <style>
        .kunkun img {
            width: 100%;
        }
    </style>
</head>

<body>

    <div class="swiper kunkun">
        <div class="swiper-wrapper">
            <!-- <div class="swiper-slide">
                <img src=""/>
            </div> -->
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    </div>
    <script>
        $.get("http://localhost:3000/banner").then(res => {
            console.log(res)
            render(res)
            initSwiper()
        })

        function render(list) {
            var oslides = list.map(item => `
            <div class="swiper-slide">
                <img src="${item.imgUrl}"/>
            </div>
            `)

            // console.log(oslides.join(""))

            $(".swiper-wrapper").html(oslides.join(""))
        }


        $.extend({
            swiper: function (ele, obj) {
                new Swiper(ele,obj)
            }
        })

        function initSwiper() {
            $.swiper(".kerwin", {
                // direction: 'vertical', // 垂直切换选项
                loop: true, // 循环模式选项
                // 如果需要分页器
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true
                },
                // 保证loop:true生效。如果不设置这个,且先渲染然后发送ajax请求,会loop失效,建议先请求后渲染
                observer: true 
            })
        }
    </script>
</body>

</html>
相关推荐
灵感__idea4 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
hui函数7 小时前
掌握JavaScript函数封装与作用域
前端·javascript
Carlos_sam8 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴8508 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
你这个年龄怎么睡得着的10 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
Dream耀10 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
NUC_Dodamce11 小时前
Cocos3x 解决同时勾选 适配屏幕宽度和 适配屏幕高度导致Widget组件失效的问题
开发语言·javascript·ecmascript
JSON_L12 小时前
Vue 电影导航组件
前端·javascript·vue.js
xptwop13 小时前
05-ES6
前端·javascript·es6
Heo13 小时前
调用通义千问大模型实现流式对话
前端·javascript·后端