JS-part13.2-swiper

最新推荐文章于 2023-12-02 11:16:32 发布

guanerkoushi

最新推荐文章于 2023-12-02 11:16:32 发布

阅读量96

点赞数

分类专栏： Web开发文章标签： javascript

本文链接：https://blog.csdn.net/xiaolei233/article/details/120144245

版权

Web开发专栏收录该内容

74 篇文章 4 订阅

订阅专栏

Javascript

swiper
- 轮播图
- 整屏切换

swiper

swiper官网和使用方法

API文档有各种配置, 再也不用手写轮播图了

swiper
  + 前端插件: 实现页面上滑动类效果

使用:
  1. 下载插件  https://www.swiper.com.cn/
  2. 引入 css 和 js 文件
  3. 复制 html 结构
  4. 直接调用 swiper 实现轮播图

轮播图

<head>
    <link rel="stylesheet" href="./swiper/css/swiper.min.css">
    <style>
        .swiper-container {
            width: 600px;
            height: 400px;
            border: 10px solid #333;
            margin: 100px auto;
        }  
    </style>
</head>
<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div style="background-color: pink;" class="swiper-slide">Slide 1</div>
            <div style="background-color: purple;" class="swiper-slide">Slide 2</div>
            <div style="background-color: orange;" class="swiper-slide">Slide 3</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>

    <script src="./swiper/js/swiper.min.js"></script>
    
    <script>
        // 内置构造函数的时候
        // 参数一: 你的轮播图容器的类名 或者 id 名
        // 参数二: 对当前这个轮播图的配置, 是一个对象
        var mySwiper = new Swiper ('.swiper-container', {
            // direction: 'vertical', // 垂直切换选项
            loop: true, // 循环模式选项
            // 初始化显示索引为 几 的那一张
            initialSlide :1,
            effect: 'cube', 
            
            // 如果需要分页器
            pagination: {
            el: '.swiper-pagination',
            },
            
            // 如果需要前进后退按钮
            navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
            }
            
            // 如果需要滚动条
            // scrollbar: {
            // el: '.swiper-scrollbar',
            // },
        })        
    </script>
</body>
</html>

在这里插入图片描述

整屏切换

<head>
    <link rel="stylesheet" href="./swiper/css/swiper.min.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        html, body{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .swiper-container {
            width: 100%;
            height: 100%;
        }  
    </style>
</head>
<body>

    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div style="background-color: pink;" class="swiper-slide">Slide 1</div>
            <div style="background-color: purple;" class="swiper-slide">Slide 2</div>
            <div style="background-color: orange;" class="swiper-slide">Slide 3</div>
        </div>
    </div>

    <script src="./swiper/js/swiper.min.js"></script>

    <script>
        var mySwiper = new Swiper ('.swiper-container', {
            direction: 'vertical', // 垂直切换选项
            initialSlide :1    
         })
    </script>
</body>
</html>

在这里插入图片描述

这也可以用来做电子简历, 扫二维码见

guanerkoushi

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS-part13.2-swiper

Javascriptswiper轮播图整屏切换swiperswiper官网和使用方法API文档有各种配置, 再也不用手写轮播图了swiper + 前端插件: 实现页面上滑动类效果使用: 1. 下载插件 https://www.swiper.com.cn/ 2. 引入 css 和 js 文件 3. 复制 html 结构 4. 直接调用 swiper 实现轮播图轮播图<head> <link rel="stylesheet" href="./sw
复制链接

扫一扫