swiper 怎么改圆点的大小

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了swiper 怎么改圆点的大小相关的知识,希望对你有一定的参考价值。

1、1:1触控运动 Swiper默认提供1:1的触控距离,当然,这个比率是可以设置的。(touchRatio) 2、触控模仿 这个功能对于开发桌面网站会很有用。简单来说,就是因为Swiper能够让鼠标事件表现得像触屏事件(点击以及拖曳滑块) 3、水平/垂直 Swiper运动主要有两种模式,horizontal(水平滑动)以及vertical(垂直运动的滑动) 4、自由模式(Free Mode) 这种模式下能够让slides 无需定位,就像通常的滑动条。(看下面的例子) 5、旋转调整 (rotation/resize) Swiper 在移动设备旋转后能自适应尺寸。 6、响应式 能使用百分比的宽高定义slides,为移动端提供不同的解决方案。 7、滑动阻止 简单来说,就是,只能使用一种模式,水平或者垂直滑动。 8、抵抗反弹(resistant bounds) Swiper能够提供一种机制,就是当滑动滑块超过最左以及最右(最上或最下)的位置时触发的一种抵御机制。 9、原生要素(native momentum) 有不少的原生东西提供给Swiper。 10、内建分页控制 Swiper能够快速生成内建的分页控制(pagination),指定html 某一标签为pagination,Swiper就能做很多东西了。 11、自动播放 只用设置延迟时间,Swiper就会自动地轮播slides直到你触碰该滑块(touch)为止。 12、循环模式(Loop mode) 该种模式下,你能够无限滑动滑块,到最后一个之后会跳转回第一个。 13、旋转模式(Carousel mode) Swiper 能够让你在slides父容器下设置你所需要展示的slides数量。 14、滑动容器 在该特征下能够使用Swiper在一些简单的能滑动的区域里,没有slides。在Apps里十分有用。 15、嵌套Swipers 能够将Swipers嵌套入各种不同的Swiper 的slide里,例如垂直的或水平的。 16、任意的HTML 标签 可以将任一的HTML 内容放到slide里,不止仅限于图像。 17、硬件加速 swiper 使用硬件加速技术(如果该移动设备支持的话)能够得到良好流畅的动画效果以及优美的外观,尤其是在ios设备里。 18、丰富的API Swiper拥有丰富的API接口。(不过关于中文文档似乎不多,没找着。)能够让开发者生成个人独有的分页器(pagination),上下滑块的按钮以及4个回调函数:onTouchStart,onTouchMove,onTouchEnd,onSlideSwitch。 19、灵活的配置 Swiper在初始化的时候能够接受多个参数以便让其尽可能的灵活。能够配置动画的速度(speed),模式(mode水平抑或垂直的),以及自由模式(free mode)...以及其他.. 20、插件API(Plugins API) Swiper从1.7版本开始就变得强大起来了,因为有更多而简单的插件API允许开发者创造属于自己的Swiper 插件或通过Swiper的核心创制hooks(挂钩)(该官网处提供了几款优秀的插件Swiper smooth progress, Swiper hash navigation,swiper scrollbar) 21、良好的兼容性 Swiper通用性的测试环境:移动端的Safari(iOS5下),android 2.1+,windows Phone 8,以及最新版本的谷歌浏览器(Chrome),Safari,Firefox,IE10 以及欧朋浏览器(Opera) 22、老版本IE的兼容 Swiper 2.x 开始,通过DOM动画,而非css transitions 兼容IE7 以上(需要包含jQuery),因为IE7不支持css3 transitions....简单来说,支持IE7 以上版本。 参考技术A

添加样式覆盖

.swiper-pagination-bullet
height: 20px;
width: 20px;

vue-awesome-swiper组件不能自动播放和导航器小圆点不显示问题

from:

https://blog.csdn.net/osdfhv/article/details/79062427 

 

 

 

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <swiper :options="swiperOption" ref="mySwiper">
        <!-- 幻灯内容 -->
        <swiper-slide :key="i" v-for="(str, i) in bannerList">
          <img :src="str.picUrl" style="height:100%"/>
        </swiper-slide>
        <!-- 以下控件元素均为可选 -->
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">

  import { swiper, swiperSlide } from ‘vue-awesome-swiper‘

  export default {
    props: [‘bannerList‘],
    data () {
      return {
        data: {},
        swiperOption: {
          // 所有配置均为可选(同Swiper配置)
          initialSlide: 0,
          pagination:‘.swiper-pagination,//这里修改
          // pagination: {
          //  el: ‘.swiper-pagination‘
          // },
          loop: true,
          speed: 400,
          direction: ‘horizontal‘,
          paginationClickable: true,
          mousewheelControl: true,
          autoplay: 1000,//这里修改
          //autoplay: true,
          autoplayDisableOnInteraction: false,
          observer: true,
          observeParents: true,
          debugger: true,
          onTransitionStart (swiper) {
            console.log(swiper)
          }
        }
      }
    },
    mounted () {
      // 这边就可以使用swiper这个对象去使用swiper官网中的那些方法
      this.swiper.slideTo(1, 1000, false)
    },
    computed: {
      swiper () {
        return this.$refs.mySwiper.swiper
      }
    },
    components: {
      swiper,
      swiperSlide
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .swiper-container {
    width: 100%
    height: 10rem
    .swiper-wrapper {
      width: 100%
      height: 100%
    }
    .swiper-slide {
      background-position: center;
      background-size: cover;
      width: 100%
      height: 100%
      img {
        width: 100%
        height: 100%
      }
    }
  }
</style>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85

 

结果发现:不能自动轮播和导航器小圆点不显示

以上是关于swiper 怎么改圆点的大小的主要内容,如果未能解决你的问题,请参考以下文章

swiper手滑导航圆点不同步

vue-awesome-swiper组件不能自动播放和导航器小圆点不显示问题

支付宝小程序Swiper 滚动图 带圆点和跳转方式

vue单文件组件怎么引入swiper.js?

如何实现窗口尺寸改变,swiper重新初始化尺寸

swiper自定义分页器