swiper分页器自定义

news2024/11/25 22:42:16


 

实现:

<template>
          <div class="center-top-swiper"
               @mouseenter="on_bot_enter"
               @mouseleave="on_bot_leave">
            <swiper :options="swiperOption"
                    ref="mySwiper">
              <swiper-slide v-for="i in 4"
                            :key="i">
                <!-- {{ i }} -->
                <img :src="require('@/assets/images/echarts/dataBoard016/swiper' + (i) + '.jpg')">
              </swiper-slide>
              <!-- 左右箭头 -->
              <div class="swiper-button-prev swiper-button-white"
                   slot="button-prev"></div>
              <div class="swiper-button-next swiper-button-white"
                   slot="button-next"></div>
              <!-- 标记页数 -->
              <div class="swiper-pagination"
                   slot="pagination"></div>
            </swiper>
          </div>
</template>
<script>
export default {
  components: {
  },
  data () {
    return {
      swiperOption: {
        // loop: false, // 因为swiper的loop模式:会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换,让Swiper看起来是循环的。所以复制出来的slide导致原本设置的echarts的id不在是唯一的,echarts绘制的图也就显示不出来了。
        // autoplay: false, // 完全关闭自动轮播
        // 循环播放
        loop: true,
        // 循环方向
        direction: "horizontal",
        // 设置slider容器能够同时显示的slides数量(carousel模式)
        slidesPerView: 1,
        // slidesPerView: "auto",
        // 设定为true时,active slide会居中,而不是默认状态下的居左(false)
        centeredSlides: true,
        // 滑动速度
        speed: 2000,
        // 在slide之间设置距离(单位px)
        spaceBetween: 10,
        // 设定初始化时slide的索引,Swiper默认初始化时显示第一个slide
        initialSlide: 0,
        grabCursor: true, // 设置为true 时,鼠标覆盖Swiper 时指针会变成手掌形状,拖动时指针会变成抓手形状。
        // 自动播放
        autoplay: {
          // 隔×秒自动滑动一次
          delay: 5000,
          stopOnLastSlide: false,
          // 设置为false,用户操作swiper之后自动切换不会停止,每次都会重新启动autoplay。默认为true
          disableOnInteraction: false
        },
        // loopedSlides: 1,// 指定要循环(重复)的幻灯片数量
        // 左右箭头
        navigation: {
          prevEl: ".swiper-button-prev",
          nextEl: ".swiper-button-next",
        },
        // 标记页数
        pagination: {
          el: ".swiper-pagination",
          renderBullet: function (index, className) {
            // console.log(className, index + 1)
            // return '<span class="' + className + '"><image src="upload/swiper' + (index + 1) + '.jpg"></span>'
            return `<span class="${className}"><image src="${require('@/assets/images/echarts/dataBoard016/swiper' + (index + 1) + '.jpg')}"></span>`
          },
          bulletClass: 'my-bullet',//需设置.my-bullet样式 // pagination分页器内元素的类名。
          bulletActiveClass: 'my-bullet-active',// 定义pagination 分页器内当前活动块的指示小点的类名。
          clickable: true, // 设置为true时,点击分页器的指示点分页器会控制Swiper切换
        },
      },
    }
  },
  mounted () {
  },
  watch: {
  },
  computed: {
  },
  methods: {
    on_bot_enter () {
      //  swiper@4.5.1 vue-awesome-swiper@3.1.3
      // this.$refs.mySwiper.swiper.autoplay.stop()

      // swiper@5.2.0 vue-awesome-swiper@4.1.1
      this.$refs.mySwiper.$swiper.autoplay.stop()
      this.$refs.mySwiper.$swiper.navigation.$nextEl.removeClass('hide')
      this.$refs.mySwiper.$swiper.navigation.$prevEl.removeClass('hide')
    },
    on_bot_leave () {
      //  swiper@4.5.1 vue-awesome-swiper@3.1.3
      // this.$refs.mySwiper.swiper.autoplay.start()

      // swiper@5.2.0 vue-awesome-swiper@4.1.1
      this.$refs.mySwiper.$swiper.autoplay.start()
      this.$refs.mySwiper.$swiper.navigation.$nextEl.addClass('hide')
      this.$refs.mySwiper.$swiper.navigation.$prevEl.addClass('hide')
    },
  },
  beforeDestroy () {
  }
}
</script>
<style lang="less" scoped>
        .center-top-swiper {
          width: 800px;
          height: 524px;
          overflow: auto;
          position: relative;

          .swiper-container {
            width: 100%;
            height: 100%;
            position: absolute;
            // --swiper-theme-color: #ff6600;
            // /* 设置Swiper风格 */
            // --swiper-navigation-color: #00ff33;
            // // /* 单独设置按钮颜色 */
            --swiper-navigation-size: 24px;
            /* 设置按钮大小 */

            .swiper-slide {
              // height: 80%;
              // background-color: #bcc;
              // height: 300px;

              img {
                height: 416px;
                vertical-align: top;
              }
            }
          }
        }
</style>
<style lang="less">
/* 鼠标移入显示左右前进后退按钮 */
.swiper-container .hide {
  opacity: 0;
}

/* 按钮显示的动画 */
.swiper-button-next,
.swiper-button-prev {
  transition: opacity 0.5s;
}

// 指示器-分页器为图片
.swiper-container-horizontal {

  .swiper-pagination-bullets {
    // height: 100px;
    width: 100%;
    height: auto;
    background: none;
    bottom: 0;
    display: flex;

    .my-bullet {
      height: auto;
      background: none;
      width: 100%;
      // height: 100px;
      background-color: #eee;

      // 未选择的图片分页器 图片透明
      >img {
        width: 100%;
        height: 100px;
        vertical-align: middle;
        display: inline-block;
        //  opacity 属性用于调整元素的透明度。它允许您控制图像的透明度或不透明度。s 透明度值可以在 0.0(完全透明)到 1.0(完全不透明)之间。
        opacity: 0.5;
      }
    }

    .my-bullet-active {

      // 选中的图片不需要 图片透明
      >img {
        opacity: 1;
      }
    }
  }

}
</style>

 参考swiper对应的API:

renderBullet(index, className)_Swiper参数选项

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2235266.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2025 年使用 Python 和 Go 解决 Cloudflare 问题

作为一名从事网络自动化和爬取工作的开发者&#xff0c;我亲眼目睹了日益复杂的安全性措施带来的挑战。其中一项挑战是 Cloudflare 的 Turnstile CAPTCHA 系统&#xff0c;目前该系统已在全球 2600 多万个网站上使用。这种先进的解决方案重新定义了我们对机器人检测的处理方式&…

windows自启动 映像劫持 屏保

Windows权限维持—自启动&映像劫持&粘滞键&辅助屏保后门 自启动 自启动路径加载 受控windows机器选择当前用户C盘目录下将文件放到这里每到电脑服务器重启就会自动加这次路径下文件 C:\Users\月\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startu…

OTA篇(1)AB系统

制作升级包&#xff1a; 一、整包升级包制作 以tina4.0 A133 b3版型为例 在/target/allwinner/a133-b6/swupdate或者 target/allwinner/generic/swupdate/目录添加如下文件 1.非安全固件 sw-subimgs-ab.cfg swota_file_list( target/allwinner/generic/swupdate/sw-descr…

移远通信推出八款天线新品,覆盖5G、4G、Wi-Fi和LoRa领域

近日&#xff0c;全球领先的物联网整体解决方案供应商移远通信宣布&#xff0c;再次推出八款高性能天线新品&#xff0c;进一步丰富其天线产品阵容&#xff0c;更好地满足全球客户对高品质天线的更多需求。具体包括5G超宽带天线YECT005W1A和YECT004W1A、5G天线YECT028W1A、4G天…

AI时代,中国高端厨居生活还能怎样进化?

每次走进厨房&#xff0c;看到安静待在角落的各式各样厨电和琳琅满目的食材&#xff0c;想想刚从职场卸甲归来&#xff0c;却还要和这些东西斗智斗勇&#xff0c;都忍不住来上一句&#xff1a;要是有魔法就好了。 有了魔法就能像《哈利波特》里的韦斯莱夫人一样&#xff0c;只…

【HTML】——VSCode 基本使用入门和常见操作

阿华代码&#xff0c;不是逆风&#xff0c;就是我疯 你们的点赞收藏是我前进最大的动力&#xff01;&#xff01; 希望本文内容能够帮助到你&#xff01;&#xff01; 目录 零&#xff1a;HTML开发工具VSCode的使用 1&#xff1a;创建项目 2&#xff1a;创建格式模板&#x…

ssm057学生公寓管理中心系统的设计与实现+jsp(论文+源码)_kaic

毕 业 设 计&#xff08;论 文&#xff09; 题目&#xff1a;学生公寓管理中心系统设计与实现 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本学生公寓管理…

WAL日志

1.WAL概述 PG WAL&#xff08;Write-Ahead Logging&#xff09;日志是PostgreSQL数据库中的一种重要机制&#xff0c;用于保证数据库的完整性和数据恢复。 1.1定义与功能 WAL日志是PostgreSQL的持久性技术&#xff0c;它将所有对数据库的修改操作&#xff08;如INSERT、UPDA…

算法练习:1658. 将 x 减到 0 的最小操作数

题目链接&#xff1a;1658. 将 x 减到 0 的最小操作数 这道题目的意思就是&#xff0c;给定一个整数数组&#xff0c;和一个x&#xff0c;只能从数组最左边或者最右边进行删除&#xff0c;使得x恰好等于0&#xff0c;并且要操作次数最少的情况&#xff0c;否则返回-1. 这道题直…

51c大模型~合集17

我自己的原文哦~ https://blog.51cto.com/whaosoft/11599989 #关于大模型「越狱」的多种方式 此项目是由伊利诺伊大学香槟分校&#xff08;UIUC&#xff09;的汪浩瀚教授主导&#xff0c;汇集了多名intern的共同努力而成。长久以来&#xff0c;这个跨学科的团队一直在前沿科…

Vue前端开发之自定义动画样式

在上一小节中&#xff0c;我们介绍了动画的实现源于6个类别样式&#xff0c;它们的名称默认前缀是一个“v”字母或者指定的名称&#xff0c;如“sc”&#xff0c;其实&#xff0c;也可以不使用这些固定的类别样式&#xff0c;开发者可以自定义任意的类别样式&#xff0c;供动画…

数据库SQL学习笔记

第 1 章 绪论 1.1 数据库系统概述 1.1.1 四个基本概念 数据库系统(DBS) 定义&#xff1a;是指在计算机系统中引入数据库后的系统构成 构成&#xff1a;数据库&#xff0c;数据库管理系统&#xff08;及其开发工具&#xff09;&#xff0c;应用系统&#xff0c;数据库管理员…

前端好用的网站分享——CSS(持续更新中)

1.CSS Scan 点击进入CSS Scan CSS盒子阴影大全 2.渐变背景 点击进入color.oulu 3.CSS简化压缩 点击进入toptal 4.CSS可视化 点击进入CSS可视化 这个强推&#xff0c;话不多说&#xff0c;看图! 5.Marko 点击进入Marko 有很多按钮样式 6.getwaves 点击进入getwaves 生…

云集电商:如何通过 OceanBase 实现降本 87.5%|OceanBase案例

云集电商&#xff0c;一家聚焦于社交电商的电商公司&#xff0c;专注于‘精选’理念&#xff0c;致力于为会员提供超高性价比的全品类精选商品&#xff0c;以“批发价”让亿万消费者买到质量可靠的商品。面对近年来外部环境的变化&#xff0c;公司对成本控制提出了更高要求&…

软考高级架构 - 8.3 - ATAM方法架构评估实践 - 超详细讲解+精简总结

总结&#xff1a; ATAM时评估架构的质量属性方法&#xff0c;帮助权衡和识别风险&#xff0c;分为四个阶段。 阶段1——演示 介绍ATAM方法&#xff0c;介绍软件商业目标和关键需求&#xff0c;详细介绍要被评估的架构。 阶段2——调查和分析 深入分析系统架构&#xff0c;评估…

Redis - Hash 哈希

一、基本认识 ⼏乎所有的主流编程语⾔都提供了哈希&#xff08;hash&#xff09;类型&#xff0c;它们的叫法可能是哈希、字典、关联数 组、映射。在Redis中&#xff0c;哈希类型是指值本⾝⼜是⼀个键值对结构&#xff0c;形如key"key"&#xff0c;value{{ field1, v…

C++上机实验|多态性编程练习

1.实验目的 (1)理解多态性的概念。 (2)掌握如何用虚函数实现动态联编 (3)掌握如何利用虚基类。 2.实验内容 设计一个飞机类 plane,由它派生出歼击机类fighter和轰炸机类 bomber,歼击机类fighter 和轰炸机类bomber 又共同派生出歼轰机(多用途战斗机)。利用虚函数和虚基类描述…

岛屿数量 广搜版BFS C#

和之前的卡码网深搜版是一道题 力扣第200题 99. 岛屿数量 题目描述 给定一个由 1&#xff08;陆地&#xff09;和 0&#xff08;水&#xff09;组成的矩阵&#xff0c;你需要计算岛屿的数量。岛屿由水平方向或垂直方向上相邻的陆地连接而成&#xff0c;并且四周都是水域。…

动态规划 之 路径问题 算法专题

一. 不同路径 不同路径 状态表示 dp[i][j] 表示走到[i][j]位置, 有几种不同的路径状态转移方程 以离[i][j] 最近的位置划分问题 1.从[i - 1][j] 到[i][j], 到[i][j]位置的不同路径数 就是和 到[i - 1][j]位置的不同路径数相同, 即dp[i][j] dp[i - 1][j] 2.从[i][j - 1] 到[i…

别名路径联想设置

如何使用/进行路径提示&#xff1f; 找到jsconfig.json文件&#xff0c;如何项目中没有的话&#xff0c;自行创建 {"compilerOptions": {"paths": {"/*": ["./src/*"]}},"exclude": ["node_modules", "dis…