swiper 实现宽度自适应

最新推荐文章于 2024-09-10 09:02:38 发布

J_Wangzai

最新推荐文章于 2024-09-10 09:02:38 发布

阅读量1.3k

点赞数 6

文章标签： css javascript web

本文链接：https://blog.csdn.net/J_1999_0524/article/details/136548319

版权

本文介绍了如何在Swiper库中设置slidesPerView属性为auto，使滑块宽度自适应，以便在响应式设计中动态调整图片展示。示例代码展示了如何配置Swiper实例以实现这一功能并添加可点击的分页器。

摘要由CSDN通过智能技术生成

设置slidesPerView:"auto"属性，然后将 slide 的宽度设置为auto

代码


    .swiper-slide {
      width: auto;
    }


 <div class="w-100 overflow-hidden vh-100">
    <div class="swiper-container h-100">
      <div class="swiper-wrapper">
        <div class="swiper-slide bg-warning">Slide 111111111111111</div>
        <div class="swiper-slide bg-info">Slide 2</div>
        <div class="swiper-slide bg-danger">Slide 3</div>
        <div class="swiper-slide bg-dark">Slide 4</div>
        <div class="swiper-slide bg-success">Slide 5</div>
        <div class="swiper-slide bg-warning">Slide 6</div>
        <div class="swiper-slide bg-success">Slide 7</div>
        <div class="swiper-slide bg-info">Slide 8888888</div>
        <div class="swiper-slide bg-warning">Slide 99999</div>
        <div class="swiper-slide bg-info">Slide 10</div>
        <div class="swiper-slide bg-warning">Slide 2</div>
        <div class="swiper-slide bg-info">Slide 3</div>
        <div class="swiper-slide bg-warning">Slide 4</div>
        <div class="swiper-slide bg-info">Slide 5</div>
        <div class="swiper-slide bg-warning">Slide55555 6</div>
        <div class="swiper-slide bg-info">Slide 7555555</div>
        <div class="swiper-slide bg-warning">Slide 555555555558</div>
        <div class="swiper-slide bg-info">Slide 5555555555559</div>
        <div class="swiper-slide bg-warning">Slide 5555555510</div>
      </div>
      <!-- Add Pagination -->
      <div class="swiper-pagination"></div>
    </div>
  </div>


    var swiper = new Swiper('.swiper-container', {
      pagination: '.swiper-pagination',
      slidesPerView: 'auto',
      paginationClickable: true,
    });