FairyTalesss 2023-03-24 17:00 采纳率: 78.6%
浏览 27
已结题

Swiper Js slider自适应显示不同数量slide问题

使用swiper js建立slider时,想要在桌面端同时展示3个slide而在移动端展示1个slide,应该如何自适应?

Html代码

<body>
    <div class="swiper">
        
        <div class="swiper-wrapper">
          
          <div class="swiper-slide">
            <img src="./1.jpg" alt="">
            <p>This is testimonial 1. This is testimonial 1. This is testimonial 1. This is testimonial 1. This is testimonial 1. This is testimonial 1.</p>
            <h2>Slide 1</h2>
          </div>
          <div class="swiper-slide">
            <img src="./2.jpg" alt="">
            <p>This is testimonial 2. This is testimonial 2. This is testimonial 2. This is testimonial 2. This is testimonial 2. This is testimonial 2.</p>
            <h2>Slide 2</h2>
          </div>
          <div class="swiper-slide">
            <img src="./3.jpg" alt="">
            <p>This is testimonial 3. This is testimonial 3. This is testimonial 3. This is testimonial 3. This is testimonial 3. This is testimonial 3.</p>
            <h2>Slide 3</h2>
          </div>
          <div class="swiper-slide">
            <img src="./1.jpg" alt="">
            <p>This is testimonial 1. This is testimonial 1. This is testimonial 1. This is testimonial 1. This is testimonial 1. This is testimonial 1.</p>
            <h2>Slide 1</h2>
          </div>
          <div class="swiper-slide">
            <img src="./2.jpg" alt="">
            <p>This is testimonial 2. This is testimonial 2. This is testimonial 2. This is testimonial 2. This is testimonial 2. This is testimonial 2.</p>
            <h2>Slide 2</h2>
          </div>
          <div class="swiper-slide">
            <img src="./3.jpg" alt="">
            <p>This is testimonial 3. This is testimonial 3. This is testimonial 3. This is testimonial 3. This is testimonial 3. This is testimonial 3.</p>
            <h2>Slide 3</h2>
          </div>
        </div>
        
        <div class="swiper-pagination"></div>
      
        
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      
        
        
    </div>
</body>

Css代码

<style>
        .swiper-wrapper{
            width: 1500px;
        }

        .swiper-wrapper .swiper-slide{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: #ededed;
            padding: 30px 0;
            border-radius: 15px;
        }

        .swiper-wrapper .swiper-slide img{
            width: 50px;
            height: auto;
            border-radius: 50%;
        }

        .swiper-wrapper .swiper-slide p{
            width: 80%;
            text-align: center;
        }

    </style>

Js代码:

<script>
    const swiper = new Swiper('.swiper', {
  // Optional parameters
        slidesPerView:3,
        spaceBetween : 30,
    

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});
</script>

  • 写回答

2条回答 默认 最新

  • 简效 2023-03-24 17:03
    关注

    swiper可以设置不同的屏幕下展示不同的

        breakpoints: { 
          320: {  //当屏幕宽度大于等于320
            slidesPerView: 2,
            spaceBetween: 10
          },
          768: {  //当屏幕宽度大于等于768 
            slidesPerView: 3,
            spaceBetween: 20
          },
          1280: {  //当屏幕宽度大于等于1280
            slidesPerView: 4,
            spaceBetween: 30
          }
        }
    
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 4月1日
  • 已采纳回答 3月24日
  • 创建了问题 3月24日

悬赏问题

  • ¥30 Hyper-v虚拟机相关问题,求解答。
  • ¥15 TSM320F2808PZA芯片 Bootloader
  • ¥45 谷歌浏览器出现开发者工具无法显示已创建的,但您可以调试已部署的代码。 状态代码 404, net::ERR HTTP RESPONSE CODE FAILURE
  • ¥15 如何解决蓝牙通话音频突发失真问题
  • ¥15 安装opengauss数据库报错
  • ¥15 【急】在线问答CNC雕刻机的电子电路与编程
  • ¥60 在mc68335芯片上移植ucos ii 的成功工程文件
  • ¥15 笔记本外接显示器正常,但是笔记本屏幕黑屏
  • ¥15 Python pandas
  • ¥15 蓝牙硬件,可以用哪几种方法控制手机点击和滑动