前端js轮播图超好用的网站-Swiper-使用介绍

news/2024/7/19 13:06:02 标签: js

swiper是一款免费，强大的滑动的插件。

使用步骤：

1.引入插件（可以使用网络地址，也可以下载到本地）

2.创建HTML结构

3.初始化swiper

实例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/swiper.min.css">
    <style>
        .swiper-container,
        .swiper-container1 {
            width: 600px;
            height: 300px;
        }
        
        .swiper-slide img,
        .swiper-slide1 img {
            width: 100%;
            height: 100%;
        }
    </style>
    <script src="js/swiper.min.js"></script>

</head>

<body>
    <!-- 
        swiper是一款免费，强大的滑动的插件。

        使用步骤：
            1.引入插件（可以使用网络地址，也可以下载到本地）
            2.创建HTML结构
            3.初始化swiper

     -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="img/1.jpg" alt=""></div>
            <div class="swiper-slide"><img src="img/2.jpg" alt=""></div>
            <div class="swiper-slide"><img src="img/3.jpg" alt=""></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar"></div>
    </div>
    <div class="swiper-container1">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="img/1.jpg" alt=""></div>
            <div class="swiper-slide"><img src="img/2.jpg" alt=""></div>
            <div class="swiper-slide"><img src="img/3.jpg" alt=""></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar"></div>
    </div>
    <!-- 导航等组件可以放在container之外 -->
    <script>
        var mySwiper1 = new Swiper('.swiper-container1', {
            // direction: 'vertical', // 垂直切换选项
            loop: true, // 循环模式选项
            autoplay: {
                delay: 2000,
            }, //可选选项，自动滑动

            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },
            keyboard: {
                enabled: true,
                onlyInViewport: true,
            },
            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            // 可能滑动多个
            freeMode: true,
            //  切换模式slide的切换效果，默认为"slide"（位移切换），可设置为'slide'（普通切换、默认）,"fade"（淡入）"cube"（方块）"coverflow"（3d流）"flip"（3d翻转）。
            effect: 'flip',
            effect: 'cube',
            cubeEffect: {
                slideShadows: true,
                shadow: true,
                shadowOffset: 100,
                shadowScale: 0.6
            },

            // 淡入淡出
            fadeEffect: {
                crossFade: true,
            },
            touchRatio: 0.5, //触摸变慢
            // effect: 'flip',
            // flipEffect: {
            //     slideShadows: true,
            //     limitRotation: true,
            // }
            // 如果需要滚动条
            // scrollbar: {
            //     el: '.swiper-scrollbar',
            // },
        })
    </script>
</body>

</html>

以上有部分的属性、方法操作，在官网中有更全面的的操作方法!

官网地址：

https://www.swiper.com.cn/