Giter VIP home page Giter VIP logo

vue-better-slider's Introduction

vue-better-slider

这是什么(What is it)

为vue提供的一个轮播图组件

代码演示如何使用

npm install vue-better-slider --save

1.main.js引入样式文件

import 'vue-better-slider/style.css'

2.导入并注册组件,注册组件

import {IcSlider,IcSliderItem} from 'vue-better-slider'
components: {
   IcSlider,
   IcSliderItem
}

3.template模板

   <ic-slider :autoplay="3000">
      <ic-slider-item v-for="(items,index) in images">
        <img :src="items.picUrl"/>
      </ic-slider-item>
    </ic-slider>
  export default {
    data() {
      return {
        images: [
          {
            linkUrl: 'http://y.qq.com/w/album.html?albummid=0044K2vN1sT5mE',
            picUrl: 'http://y.gtimg.cn/music/photo_new/T003R720x288M000001YCZlY3aBifi.jpg',
            id: 11351
          },
          {
            linkUrl: 'https://y.qq.com/m/digitalbum/gold/index.html?_video=true&id=2197820&g_f=shoujijiaodian',
            picUrl: 'http://y.gtimg.cn/music/photo_new/T003R720x288M000004ckGfg3zaho0.jpg',
            id: 11372
          },
          {
            linkUrl: 'http://y.qq.com/w/album.html?albummid=001tftZs2RX1Qz',
            picUrl: 'http://y.gtimg.cn/music/photo_new/T003R720x288M00000236sfA406cmk.jpg',
            id: 11378
          },
          {
            linkUrl: 'https://y.qq.com/msa/218/0_4085.html',
            picUrl: 'http://y.gtimg.cn/music/photo_new/T003R720x288M000001s0BXx3Zxcwb.jpg',
            id: 11375
          },
          {
            linkUrl: 'https://y.qq.com/m/digitalbum/gold/index.html?_video=true&id=2195876&g_f=shoujijiaodian',
            picUrl: 'http://y.gtimg.cn/music/photo_new/T003R720x288M000002cwng4353HKz.jpg',
            id: 11287
          }
        ]
      }
    }
  }

组件演示demo

git clone https://github.com/songhaoreact/vue-better-slider.git
cd vue-better-slier
npm install 
npm run dev

效果图

image

说明

实现功能有:轮播 自动播放 dots 循环播放,适合手机端,图片高度自适应

vue-better-slider's People

Contributors

openfe-openfe avatar songhaophper avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

vue-better-slider's Issues

npm 安装的vue-better-slider 与你的源码文件 vue-better-slider 不一致

npm install vue-better-slider --save 安装后,我在 node_modules 文件夹目录中的查看了安装后的vue-better-slide文件夹,发现里面有文件缺失,跟你的源码有差异。导致项目运行不成功。

解决方案:我把你的源码vue-better-slider中的文件夹替换掉 npm 安装后的vue-better-slider文件目录就可以了。

希望对后来的朋友有帮助。

谢谢大佬提供的轮播图插件,很简洁轻便,thk~

npm

npm进去得不到你地址呀,import IcSlider from './vue-better-slider/components/slider'
import IcSliderItem from './vue-better-slider/components/slider-item'

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.