轮播库-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>
相关推荐
黄瓜沾糖吃1 小时前
大佬们指点一下倒计时有什么问题吗?
前端·javascript
温轻舟1 小时前
3D词云图
前端·javascript·3d·交互·词云图·温轻舟
浩龙不eMo1 小时前
✅ Lodash 常用函数精选(按用途分类)
前端·javascript
爱分享的程序员1 小时前
前端面试专栏-算法篇:17. 排序算法
前端·javascript·node.js
pe7er2 小时前
使用 Vue 官方脚手架创建项目时遇到 Node 18 报错问题的排查与解决
前端·javascript·vue.js
pe7er2 小时前
使用 types / typings 实现全局 TypeScript 类型定义,无需 import/export
前端·javascript·vue.js
islandzzzz3 小时前
(第二篇)HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html
喝拿铁写前端3 小时前
前端实战优化:在中后台系统中用语义化映射替代 if-else,告别魔法数字的心智负担
前端·javascript·架构
超人不会飛3 小时前
就着HTTP聊聊SSE的前世今生
前端·javascript·http
蓝胖子的多啦A梦3 小时前
Vue+element 日期时间组件选择器精确到分钟,禁止选秒的配置
前端·javascript·vue.js·elementui·时间选选择器·样式修改