关于swpier的问题

页面引入swiper,初始状态。

              <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="images/banner4.jpg" alt="杯子"/></div>
                  <div class="swiper-slide"><img src="images/banner1.jpg" alt="杯子"/></div>
                  <div class="swiper-slide"><img src="images/banner2.jpg" alt="杯子"/></div>
                  <div class="swiper-slide"><img src="images/banner3.jpg" alt="杯子"/></div>
              </div>
            </div>
    <script type="text/javascript">
      var mySwiper = new Swiper('.swiper-container',{
        loop: true,
        autoplay: 3000,
      });  
    </script>

自己没有在这块加任何CSS样式,每个滑块的<img>图片高度都是350px;可是打开页面,每个swiper-slide的height就自动变成2000多px,这是怎么回事啊。

clipboard.png

clipboard.png

高度2000多px,都把下面内容挤到底部了。

阅读 3.9k
2 个回答
  1. 检查样式 swiper.min.css 是否引入

  2. 确定 swiper 父级元素定位问题,是否有脱离文档流

  3. 图片可以设置一下 img { max-width: 100%; }

更具体问题,需要看过CSS才能知道了,希望以上建议能帮到你

首先你要知道swiper-wrapper的默认css里,height为100%,并且是父元素是flex布局,所以你需要初始化swiper-wrapper和swiper-container等元素的默认值,例如把swiper-container的高度设置成height:200px等,你就会看到变化。并且你可以打开new Swiper里面的自动高度设置autoHeight:true

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题