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

Jason_SHl · 发表于 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后，无法往左滑动。

Jason_SHl · 发表于 2019-11-6 15:24:56

有没有大神帮忙看看，小弟不胜感激啊。