vue-awesome-swiper基础使用

准备：下载引入vue-awesome-swiper

import {swiper,swiperSlide } from 'vue-awesome-swiper'
...
  components: {
          swiper,
          swiperSlide
        },

vue-awesome-swiper 自定义索引样式

	<div class="carousel_1">
        <h3>正常的点索引</h3>
        <swiper :options="swiperOption_1">
          <swiperSlide>
            <a href="javascript:;">
              <img src="../../assets/images/test/img1.png" class="not_imgbg">
            </a>
          </swiperSlide>
          <swiperSlide>
            <a href="javascript:;">
              <img src="../../assets/images/test/img2.jpg" class="not_imgbg">
            </a>
          </swiperSlide>
          <swiperSlide>
            <a href="javascript:;">
              <img src="../../assets/images/test/img3.jpg" class="not_imgbg">
            </a>
          </swiperSlide>
          <div class="swiper-pagination" id="pagination_1" slot="pagination"></div>
        </swiper>
  </div>

 swiperOption_1:{
                slidesPerView:1,//一次显示几个
                autoplay: {
                  disableOnInteraction: false,//用户操作后是否停止自动
                  delay:2000,//轮播间隔时间
                },
                speed:500,//切换速度
                pagination:{
                  el:'#pagination_1'//索引插槽元素
                },
                loop: true,//是否无缝循环轮播
              },
            }

 .carousel_1{
    img{
      width: 100%;
    }
    /*修改索引的样式*/
    #pagination_1 .swiper-pagination-bullet{
      width: 40px;
      height: 40px;
    }
    /*修改当前触发的索引的样式*/
    #pagination_1 .swiper-pagination-bullet-active{
      background-color: #f64c56;
    }
  }

效果：

数字类型（vue-awesome-swiper仿考拉海购轮播）

      <div class="carousel_2">
        <h3>数字索引</h3>
        <swiper :options="swiperOption_2">
          <swiperSlide>
            <a href="javascript:;">
              <img src="../../assets/images/test/img1.png" class="not_imgbg">
            </a>
          </swiperSlide>
          <swiperSlide>
            <a href="javascript:;">
              <img src="../../assets/images/test/img2.jpg" class="not_imgbg">
            </a>
          </swiperSlide>
          <swiperSlide>
            <a href="javascript:;">
              <img src="../../assets/images/test/img3.jpg" class="not_imgbg">
            </a>
          </swiperSlide>
          <div class="swiper-pagination" id="pagination_2" slot="pagination"></div>
        </swiper>
      </div>

 swiperOption_2:{
                slidesPerView:1,//一次显示几个
                autoplay: {
                  disableOnInteraction: false,//用户操作后是否停止自动
                  delay:2000,//轮播间隔时间
                },
                speed:500,//切换速度
                pagination:{
                  el:'#pagination_2',//索引插槽元素
                  type: 'fraction'//数字分页
                },
                loop: true,//是否无缝循环轮播
              },

 .carousel_2{
    img{
      width: 100%;
    }
    /*修改索引的样式*/
    #pagination_2{
      right: 40px;
      left:inherit;
      padding: 0 30px;
      width:auto;
      font-size:0.28rem;
      background: url("./indexBg.png");
      background-size:98px;
      background-repeat: no-repeat;
      background-position: center;
      color: #fff;
      span{
        font-size: 26px;
        color: #fff;
        display: inline-block;
        width:30px;
        height:60px;
        line-height:60px;
      }
    }

  }

效果：

vue-awesome-swiper 自定义索引内容

 <div class="carousel_3">
        <h3>自定义内容索引</h3>
        <swiper :options="swiperOption_3">
          <swiperSlide>
            <a href="javascript:;">
              <img src="../../assets/images/test/img1.png" class="not_imgbg">
            </a>
          </swiperSlide>
          <swiperSlide>
            <a href="javascript:;">
              <img src="../../assets/images/test/img2.jpg" class="not_imgbg">
            </a>
          </swiperSlide>
          <swiperSlide>
            <a href="javascript:;">
              <img src="../../assets/images/test/img3.jpg" class="not_imgbg">
            </a>
          </swiperSlide>
          <div class="swiper-pagination" id="pagination_3" slot="pagination"></div>
        </swiper>
      </div>

			imgName:["兑好礼","影视精选","点滴爱心"],
              swiperOption_3:{
                slidesPerView:1,//一次显示几个
                autoplay: {
                  disableOnInteraction: false,//用户操作后是否停止自动
                  delay:2000,//轮播间隔时间
                },
                speed:500,//切换速度
                pagination:{
                  el:'#pagination_3',//索引插槽元素
                  clickable: true,//是否可点击
                  renderBullet:(index, className)=> {
                  var name=this.imgName[index];
                  return `<div class="swiper-pagination-bullet-custom swiper-pagination-bullet radius50 Title">
                     <div class="item">${name}</div>
                    </div>`
                  }
                },
                loop: true,//是否无缝循环轮播
              },

 .carousel_3{
    img{
      width: 100%;
    }
    /*修改索引的样式*/
    #pagination_3 .swiper-pagination-bullet{
      filter:alpha(opacity=100);
      -moz-opacity:1;
      -khtml-opacity: 1;
      opacity: 1;
      width: 200px;
      height: 40px;
      line-height: 40px;
      background-color: #f6ccbe;
    }
    /*修改当前触发的索引的样式*/
    #pagination_3 .swiper-pagination-bullet-active{
      background-color: #f64c56;
    }
  }

效果：

以上：(*￣︶￣)

vue-awesome-swiper 实现文字导航

 <div id="headerNav">
    <swiper :options="swiperOption">
      <swiperSlide v-for="(item,i) in headerNavArr" :key="i" v-bind:class="{'themeBorder actived':item.className==$route.query.className}">
        <div class="navItem">{{item.className}}</div>
      </swiperSlide>
    </swiper>
  </div>

 headerNavArr:[
          {className:"个人护理"},
          {className:"日常用品"},
          {className:"母婴儿童"},
          {className:"厨房用品"},
          {className:"家居家纺"},
          {className:"精品家电"},
          {className:"每日金喜"},
        ],
        swiperOption:{
          slidesPerView: 5,//一次显示
          freeMode: true,//挨边
          slideToClickedSlide:true,//点击居中
//          preventLinksPropagation : false,//拖动不触发
        },

  #headerNav{
    overflow: auto;
    width:100%;
  .navItem{
    display: block;
    font-size: 28px;
    height: $commonH;
    line-height:$commonH;
    color: #666;
  }
  }

效果：