vue组件开发之slider组件使用详解

本文实例为大家分享了vue组件开发之slider组件的具体使用代码，供大家参考，具体内容如下

代码如下：

  *{margin:0 auto;padding:0;font-family:"微软雅黑";}

  .slider{
    position:relative;
    height:200px;
    width:400px;
    margin:50px auto;
    overflow:hidden;
  }
  .slider .wrapbox{
    width:1600px;
    height:200px;
    transition:all 1.5s;
  }
  .slider .status{
    position:absolute;
    top:170px;
    height:20px;
    width:400px;
    text-align:center;
  }
  .slider .status span{
    display:inline-block;
    height:20px;
    width:20px;
    margin:0 10px;
    background:#eee;
    border-radius:10px;
  }
  .slider .status span.active{
    background:#352929;
  }
  .slider .wrapbox .item{
    float:left;
    height:200px;
    width:400px;
    line-height:200px;
    text-align:Center;
    color:#fff;
    font-size:25px;
    background:red;
  }
  .slider .wrapbox .item:nth-of-type(2){
    background:blue;
  }
  .slider .wrapbox .item:nth-of-type(3){
    background:yellow;
  }
  .slider .wrapbox .item:nth-of-type(4){
    background:green;
  }
  .slider .btn{
    position:absolute;
    top:50%;
    height:40px;
    width:20px;
    line-height:40px;
    color:#fff;
    text-align:center;
    background:rgba(10, 10, 10, .85);
    transform:translateY(-50%);
    cursor:pointer;
  }
  .slider .next-btn{
    right:0;
  }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。