JavaScript Swiper插件

最新推荐文章于 2025-02-27 20:04:11 发布

苦涩2020

最新推荐文章于 2025-02-27 20:04:11 发布

阅读量697

点赞数

分类专栏： JavaScript 前端文章标签： javascript

本文链接：https://blog.youkuaiyun.com/UserPython/article/details/107221674

版权

本文档详细介绍了JavaScript的Swiper插件，包括如何初始化Swiper实例、设置环路和自动切换、调整切换时间与方向，以及配置各种选项如分页器、前进后退按钮和滚动条等。此外，还涵盖了分页器控制切换、触摸事件响应、网格布局和动画效果的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Swiper开发文档

一款免费以及轻量级的移动设备触控滑块的js框架

初始化Swiper实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="./swiper.min.css">
    <script src="./js/jquery-3.4.1.min.js"></script>
    <script src="./js/swiper.min.js"></script>
    <style type="text/css">
        #box1{
    
            width: 600px; height: 300px;
            margin: 50px auto;
        }
        #box1 .sd1, #box1 .sd2, #box1 .sd3{
    
            line-height: 300px; text-align: center;
            font-size: 50px; color: #fff;
        }
        #box1 .sd1{
    background-color: #ff0000;}
        #box1 .sd2{
    background-color: #00ff00;}
        #box1 .sd3{
    background-color: #0000ff;}
    </style>
</head>
<body>
    <!-- swiper页面结构 -->
    <div class="swiper-container" id="box1">
        <div class="swiper-wrapper">
            <div class="swiper-slide sd1">Slide 1</div>
            <div class="swiper-slide sd2">Slide 2</div>
            <div class="swiper-slide sd3">Slide 3</div>
        </div>
    </div>

    <script>  
        // 初始化Swiper实例：new Swiper(swiper容器, 个性化配置)
        var mySwiper = new Swiper ('.swiper-container', {
       });       
    </script>
</body>
</html>

环路及自动切换

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="./swiper.min.css">
    <script src="./js/jquery-3.4.1.min.js"></script>
    <script src="./js/swiper.min.js"></script>
    <style type="text/css">
        #box1{
    
            width: 600px; height: 300px;
            margin: 50px auto;
        }
        #box1 .sd1, #box1 .sd2, #box1 .sd3{
    
            line-height: 300px; text-align: center;
            font-size: 50px; color: #fff;
        }
        #box1 .sd1{
    background-color: #ff0000;}
        #box1 .sd2{
    background-color: #00ff00;}
        #box1 .sd3{
    background-color: #0000ff;}
    </style>
</head>
<body>
    <!-- swiper页面结构 -->
    <div class="swiper-container" id="box1">
        <div class="swiper-wrapper">
            <div class="swiper-slide sd1">Slide 1</div>
            <div class="swiper-slide sd2">Slide 2</div>
            <div class="swiper-slide sd3">Slide 3</div>
        </div>
    </div>

    <script>  
        // 初始化Swiper实例：new Swiper(swiper容器, 个性化配置)
        var mySwiper = new Swiper ('.swiper-container', {
    
        //   direction: 'vertical', // 垂直切换选项; 默认为水平切换
          loop: true, // 循环模式选项; 默认为false
          autoplay: true,  //开启启动切换; 默认为false
        })        
    </script>
</body>
</html>

切换时间和切换方向

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="./swiper.min.css">
    <script src="./js/jquery-3.4.1.min.js"></script>
    <script src="./js/swiper.min.js"></script>
    <style type="text/css">
        #box1{
    
            width: 600px; height: 300px;
            margin: 50px auto;
        }
        #box1 .sd1, #box1 .sd2, #box1 .sd3{
    
            line-height: 300px; text-align: center;
            font-size: 50px; color: #fff;
        }
        #box1 .sd1{
    background-color: #ff0000;}
        #box1 .sd2{
    background-color: #00ff00;}
        #box1 .sd3{
    background-color: #0000ff;}
    </style>
</head>
<body>
    <!-- swiper页面结构 -->
    <div class="swiper-container" id="box1">
        <div class="swiper-wrapper">
            <div class="swiper-slide sd1">Slide 1</div>
            <div class="swiper-slide sd2">Slide 2</div>
            <div class="swiper-slide sd3">Slide 3</div>
        </div>
    </div>

    <script>  
        // 初始化Swiper实例：new Swiper(swiper容器, 个性化配置)
        var mySwiper = new Swiper ('.swiper-container', {
    

        loop: true, // 循环模式选项; 默认为false
        
        //   autoplay: true,  //开启启动切换; 默认为false; 值可以是布尔值，也可以是对象
        autoplay:{
          //当值为对象时，表示自动切换
            delay:1000, //自动切换的时间间隔（单位:ms）
            reverseDirection:true,      //开启反向自动切换
        },
		
		//direction: "vertical",      //Slide的切换方向，默认为水平方向；水平：horizontal、垂直：vertical
		
        speed:2000,     //自动切换过程时间（单位:ms）
        })        
    </script>
</body>
</html>

常用配置项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="./swiper.min.css">
    <script src="./js/jquery-3.4.1.min.js"></script>
    <script src="./js/swiper.min.js"></script>
    <style type="text/css">
        #box1{
    
            width: 600px; height: 300px;
            margin: 50px auto;
        }
        #box1 .sd1, #box1 .sd2, #box1 .sd3{
    
            line-height: 300px; text-align: center;
            font-size: 50px; color: #fff;
        }
        #box1 .sd1{
    background-color: #ff0000;}
        #box1 .sd2{
    background-color: #00ff00;}
        #box1 .sd3{
    background-color: #0000ff;}
    </style>
</head>
<body>
    <!-- swiper页面结构 -->
    <div class="swiper-container" id="box1">
        <div class="swiper-wrapper">
            <div class="swiper-slide sd1">Slide 1</div>
            <div class="swiper-slide sd2">Slide 2</div>
            <div class="swiper-slide sd3">Slide 3</div>
        </div>
    </div>

    <script>  
        // 初始化Swiper实例：new Swiper(swiper容器, 个性化配置)
        var mySwiper = new Swiper ('.swiper-container',

最低0.47元/天解锁文章