如何使用 Swiper.js 插件设计移动触摸滑块？

在本文中，我们将学习如何使用 JavaScript Swiper 插件为移动应用程序、移动网站或 Web 应用程序设计移动触摸滑块。

方法：

• 从此链接下载所需的预编译文件并将它们保存在您的工作文件夹中，以实现以下示例。
• 将下载的文件“swiper.min.js”和“swiper.min.css”保存在工作文件夹的根目录中，以便以下示例正常工作。
• 否则，请使用以下示例代码中给出的 CDN 链接。
• 使用类“swiper-container”的 div 元素设计 HTML 文档，其中包含div元素，其中包含用于滑动的图像，类“swiper-slide”。
• 使用 HTML src 属性上传图片。
• 在代码的脚本部分，使用插件初始化 swiper() 方法。根据应用程序的需要设置不同的选项。
• 在代码的样式部分，我们使用嵌入式样式来设计带有“swiper-container”和“swiper-slide”类以及body元素的HTML元素。
• 参考不同的CSS显示属性实现。

CDN 链接：

示例 1： 以下示例演示了使用 Swiper 插件的基本滑块。插件的其他属性也可以根据需要进行设置。该页面使用 HTML div 元素设计，插件的类即“swiper-container”、“swiper-wrapper”、“swiper-slide”、“swiper-pagination”和其他类。使用 HTML img 元素为滑块插入各种图像。滑块在以下代码的脚本部分中使用选项设置进行初始化。

HTML

  

    
    Implementing Swiper
  
    
    
    
    
    
    
  
    
    
        html,
        body {
            position: relative;
            height: 100%;
        }
  
        body {
            font-family: Helvetica Neue;
            color: #000;
            margin: 0;
            padding: 0;
        }
  
        .swiper-container {
            width: 100%;
            height: 100%;
        }
  
        .swiper-slide {
            background: #fff;
            display: -ms-flexbox;
            display: -webkit-flex;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
        }
    

  

    
    
        
            
                
            
            
                
            
            
                
            
            
                
            
        
  
        
        
        
        
    
  
    
    
        var swiper = new Swiper('.swiper-container', {
  
            pagination: {
                el: '.swiper-pagination',
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            scrollbar: {
                el: '.swiper-scrollbar',
            }
        });
    

  

输出：

示例 2：在下面的示例中，我们只是更改或调整了上述 HTML 代码的脚本部分中的属性的选项值。开发者可以根据应用的需要进行更改或添加。一次可以看到两张幻灯片，滑块的顶部和底部都有一个进度条。

HTML

  

    
    Implementing Swiper
  
    
    
    
    
    
    
  
    
    
        html,
        body {
            position: relative;
            height: 100%;
        }
  
        body {
            font-family: Helvetica Neue;
            color: #000;
            margin: 0;
            padding: 0;
        }
  
        .swiper-container {
            width: 100%;
            height: 100%;
        }
  
        .swiper-slide {
            background: #fff;
            display: -ms-flexbox;
            display: -webkit-flex;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
        }
    

  

    
    
        
            
                
            
            
                
            
            
                
            
            
                
            
        
        
        
        
        
    
  
    
    
        var swiper = new Swiper('.swiper-container', {
            slidesPerView: 2,
            centeredSlides: true,
            pagination: {
                el: '.swiper-pagination',
                type: 'progressbar',
                slidesPerView: 'auto',
                initialSlide: 1,
                resistanceRatio: 0,
                clickable: true
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            scrollbar: {
                el: '.swiper-scrollbar',
            },
            mousewheel: true,
        });
    

  

输出：