swiper不同屏幕尺寸宽度的媒体查询

Ervin

1. swiper 媒体查询
   
2. 在使用Swiper进行响应式设计时，媒体查询是一种常见的方法来调整Swiper的参数以适应不同的屏幕尺寸。以下是一个使用Swiper和媒体查询的简单示例：
   
3. 
   
4. HTML:
   
5. <div class="swiper-container">
   
6.     <div class="swiper-wrapper">
   
7.         <div class="swiper-slide">Slide 1</div>
   
8.         <div class="swiper-slide">Slide 2</div>
   
9.         <div class="swiper-slide">Slide 3</div>
   
10.     </div>
    
11.     <!-- 如果需要分页器 -->
    
12.     <div class="swiper-pagination"></div>
    
13.     <!-- 如果需要导航按钮 -->
    
14.     <div class="swiper-button-prev"></div>
    
15.     <div class="swiper-button-next"></div>
    
16.     <!-- 如果需要滚动条 -->
    
17.     <div class="swiper-scrollbar"></div>
    
18. </div>
    
19. 
    
20. JavaScript:
    
21. var mySwiper = new Swiper('.swiper-container', {
    
22.     // 初始化参数
    
23.     direction: 'horizontal',
    
24.     loop: true,
    
25.     // 媒体查询
    
26.     breakpoints: {
    
27.         1024: {
    
28.             slidesPerView: 3,
    
29.             spaceBetween: 20
    
30.         },
    
31.         768: {
    
32.             slidesPerView: 2,
    
33.             spaceBetween: 20
    
34.         },
    
35.         320: {
    
36.             slidesPerView: 1,
    
37.             spaceBetween: 10
    
38.         }
    
39.     }
    
40. });
    
41. 
    
42. 在这个例子中，Swiper容器将根据屏幕宽度的不同，在不同的断点处应用不同的参数。例如，当屏幕宽度小于320像素时，每个视图将只显示一个滑块，并且它们之间的间距将被设置为10像素。随着屏幕尺寸的增加，Swiper的参数会相应地调整，以提供更好的用户体验。

复制代码