查看: 42|回复: 1

js中使用jq对div内容更改后,swipper无法左滑动。

[复制链接]
  • TA的每日心情
    郁闷
    2019-11-6 15:24
  • 签到天数: 1 天

    [LV.1]初来乍到

    1

    主题

    3

    帖子

    13

    积分

    新手上路

    Rank: 1

    积分
    13
    发表于 2019-11-6 15:20:12 | 显示全部楼层 |阅读模式
    基本代码:
    <!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" type="text/css" href="swiper.min.css" />
    </head>
    <body>
        <div class="swiper-container" id="swiper1">
            <div class="swiper-wrapper">
                <div class="swiper-slide">slider1</div>
                <div class="swiper-slide">slider2</div>
                <div class="swiper-slide">slider3</div>
                <div class="swiper-slide">slider4</div>
                <div class="swiper-slide">slider5</div>
                <div class="swiper-slide">slider6</div>
                <div class="swiper-slide">slider7</div>
                <div class="swiper-slide">slider8</div>
                <div class="swiper-slide">slider9</div>
                <div class="swiper-slide">slider10</div>
            </div>
        </div>
        <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
        <script type="text/javascript" src="swiper.min.js"></script>
        <script>
            var mySwiper = new Swiper('.swiper-container', {
                slidesPerView: 3,
                initialSlide: 9,
            });

            var html = '<div class="swiper-wrapper">';
            html += '<div class="swiper-slide">slider11</div>';
            html += '<div class="swiper-slide">slider12</div>';
            html += '<div class="swiper-slide">slider13</div>';
            html += '<div class="swiper-slide">slider14</div>';
            html += '<div class="swiper-slide">slider15</div>';
            html += '<div class="swiper-slide">slider16</div>';
            html += '<div class="swiper-slide">slider17</div>';
            html += '<div class="swiper-slide">slider18</div>';
            html += '<div class="swiper-slide">slider19</div>';
            html += '<div class="swiper-slide">slider20</div>';
            html += '</div>';
            $("#swiper1").html(html);
            var mySwiper2 = new Swiper('.swiper-container', {
                slidesPerView: 3,
                initialSlide: 9,
            });
        </script>
    </body>
    </html>


    在使用jq对swiper1的内容更改后,再加载swiper-container后,无法往左滑动。
    回复

    使用道具 举报

  • TA的每日心情
    郁闷
    2019-11-6 15:24
  • 签到天数: 1 天

    [LV.1]初来乍到

    1

    主题

    3

    帖子

    13

    积分

    新手上路

    Rank: 1

    积分
    13
     楼主| 发表于 2019-11-6 15:24:56 | 显示全部楼层
    有没有大神帮忙看看,小弟不胜感激啊。
    回复 支持 反对

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    Archiver|手机版|小黑屋|Swiper中文网 ( 粤ICP备15001020号

    GMT+8, 2019-11-18 04:45 , Processed in 0.109671 second(s), 27 queries .

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表