vue修改swiper框架轮播图小圆点的样式不起作用的解决

目录
  • swiper框架轮播图小圆点样式不起作用
    • 不要加 scoped
  • swiper小圆点默认样式改变

swiper框架轮播图小圆点样式不起作用

不要加 scoped

下面是错误写法

<style  scoped>
 .swiper-pagination-bullet-active {
    background: white;
  }
</style>

正确写法

<style >
 .swiper-pagination-bullet-active {
    background: white;
  }
  </style>

swiper小圆点默认样式改变

开发过程中swiper样式不喜欢，想要修改小圆点样式，拿到swiper下的小圆点进行修改，去设置想要的颜色，点与点之间的间距等等一系列样式

/* 圆点的样式 */
swiper .wx-swiper-dot {
  width: 35rpx;
  height: 7rpx;
  border-radius: 50%;
  display: inline-flex;
  margin-left: 19rpx;
  justify-content: space-between;
}
swiper .wx-swiper-dot::before {
  content: '';
  flex-grow: 1;
  background: #fff;
  border-radius: 50%;
}
swiper .wx-swiper-dot-active::before {
  background: rgba(255, 255, 255, .8);
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue封装Swiper实现图片轮播效果

    Vue封装Swiper实现图片轮播效果

    图片轮播是前端中经常需要实现的一个功能.最近学习Vue.js,就针对Swiper进行封装,实现一个简单的图片轮播组件. 一.Swiper 在实现封装之前,先介绍一下Swiper. Swiper是纯Javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单.功能强大,是架构移动终端网站的重要选择. Swiper的应用场景广泛,实现效果很好,下面个这实际案例就是Swiper的典

  • vue使用swiper插件实现轮播图的示例

    hello大家好,最近我在做一个仿饿了么的项目,我会将我的项目经验同步到这里,与大家分享! vue - 使用swiper插件实现轮播图 下载安装: npm install swiper --save Msite.vue的HTML部分: <!--在页面msite_nav导航部分使用swiper--> <div class="swiper-container"> <div class="swiper-wrapper"> <div

  • swiper在vue项目中loop循环轮播失效的解决方法

    长话短说,在vue(2.5.x)中使用swiper(4.3.3),轮播加了autoplay和loop.observer.observeParents等参数还是很诡异的无法循环轮播: 那么可以这样写代码试试: this.$api.queryImages().then((resp) => { if(resp && resp.data.resultCode == "0"){ this.swiperImgs = resp.data.data; this.$nextTick

  • vue2.0使用swiper组件实现轮播效果

    轻松实现vue2.0轮播效果,供大家参考,具体内容如下 1.安装swiper npm install swiper@3.4.1 --save-dev 2.引用组件 import Swiper from 'swiper'; import 'swiper/dist/css/swiper.min.css'; 3.html页面代码 <div class="swiper-container" id="swiper"> <div class="swi

  • vue修改swiper框架轮播图小圆点的样式不起作用的解决

    目录 swiper框架轮播图小圆点样式不起作用 不要加 scoped swiper小圆点默认样式改变 swiper框架轮播图小圆点样式不起作用 不要加 scoped 下面是错误写法 <style  scoped>  .swiper-pagination-bullet-active {     background: white;   } </style> 正确写法 <style >  .swiper-pagination-bullet-active {     back

  • Vue使用Swiper封装轮播图组件的方法详解

    Vue使用Swiper封装轮播图组件的方法详解

    目录 Swiper 为什么要封装组件 开始封装 1.下载安装Swiper 2.引入css样式文件 3.引入js文件 4.把官网使用方法中的HTML结构复制粘贴过来 5.初始化Swiper 自定义效果 完整代码 效果展示 Swiper Swiper是一个很常用的用于实现各种滑动效果的插件,PC端和移动端都能很好的适配. 官网地址:www.swiper.com.cn/ 目前最新版本是Swiper7,但众所周知最新版本通常不稳定,所以这里使用Swiper6来封装. Swiper各版本区别: 为什么要封

  • 微信小程序 swiper组件轮播图详解及实例

    微信小程序 swiper组件轮播图详解及实例

    微信小程序 swiper组件轮播图 照着开发文档尝试,总是能有所收获.之前做Android开发,做个轮播图并不简单,用上viewpage再设置圆点,折腾一通之后还一堆bug.今天尝试微信小程序开发做轮播图,真是感动的泪流满面.废话说完了,上图. 上图就是一个简易的轮播图,是不是很简易.23333 主要是代码也很简单. 1.index.wxml <!--index.wxml--> <swiper class="swiper" indicator-dots="t

  • vue仿携程轮播图效果(滑动轮播,下方高度自适应)

    vue仿携程轮播图效果(滑动轮播,下方高度自适应)

    先看案例,使用vue+swiper实现,slide不同高度时,动态计算盒子高度,让其下方高度自适应的效果 首先搭建vue项目,这里不做过多说明,然后安装swiper npm install swiper --save-dev 1. js部分:初始化swiper组件,vue要在mounted生命周期中进行初始化,代码如下: import Swiper from 'swiper' import { TweenMax, Power2 } from 'gsap' 初始化时调用resize函数,计算屏幕容

  • Swiper实现轮播图效果

    本文实例为大家分享了Swiper实现轮播图效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Swiper demo</title> <meta name="viewport" content="width=device-width

  • Vue Echarts实现图表轮播图以及图表组件封装和节流函数优化讲解

    目录 一.为什么要优雅的使用echarts 二.最初的表格组件 三.初步的封装 四.性能优化 一.为什么要优雅的使用echarts 为了提高代码的规范性.复用性,vue中最常用的就是将具有某些功能的代码封装到一个插件.如果没有对插件进行封装,在后期使用插件的时候效率会十分低下也不便于后期对程序的维护拓展,在优雅的使用echarts时,首先,我们考虑到多个地方需要用到echarts,就需要封装一个组件出来,由于每一个图中的属性均由配置项option进行控制,所以我们可以将option选项提取出来,

  • vue利用better-scroll实现轮播图与页面滚动详解

    vue利用better-scroll实现轮播图与页面滚动详解

    前言 better-scroll 也很强大,不仅可以做普通的滚动列表,还可以做轮播图.picker 等等...所以本文主要给大家介绍了关于vue用better-scroll实现轮播图与页面滚动的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 1.安装better-scroll 在根目录中package.json的dependencies中添加: "better-scroll": "^0.1.15" 然后 npm i 安装. 2.封装代码

  • JS实现轮播图小案例

    JS实现轮播图小案例

    本文实例为大家分享了JS实现轮播图小案例的具体代码,供大家参考,具体内容如下 分析: 点击左右箭头 滑动轮播图 鼠标不在轮播图内时 每隔2秒自动滑动轮播图 鼠标移入时 停止自动滑动轮播图 点击小圆圈 显示对应的轮播图 1.鼠标移入.移出显示或隐藏左右箭头: // 获取左右箭头的元素 let arrow_l = this.document.querySelector('.arrow-l'); let arrow_r = this.document.querySelector('.arrow-r')

  • Vue手写横向轮播图的实例

    Vue手写横向轮播图的实例

    目录 Vue手写横向轮播图 Vue常见的轮播图 Vue手写横向轮播图 前提:自己封装的轮播图,暂时没测出bug~ 效果如下图,一行三个,点击上一张/下一张 向前或向后移动一格,窗口缩放会适当变形,不影响切换 <template> <div class="swiper-template"> <div class="my-swiper-page"> <div class="page-left"> <

  • vue.js实现简单轮播图效果

    学习了vue.js也有一段时间了,做了个小demo来熟悉一下,很常见的demo,-------轮播图,没学vue之前的轮播图用JavaScript或者jquery都非常简单,发现用vue来写也挺有意思的.说下简单的思路,图片的轮播用v-if或者v-show来代替原来的Js滑动,过度效果用transition可简单实现,注意,滑动过程中是能看见两张图的,所以要用两个transition. (1)先写出整体的框架 <template> <div class="slide-show&

随机推荐