vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件
欢迎加入前端交流群来获取视频资料以及前端学习资料:749539640
转载文章请注明出处!
如果只是要使用轮播效果的话可以参考下一些vue组件;比如这篇文章
--------2019.7.9------------------
请参考swiper官方插件:https://github.com/surmon-china/vue-awesome-swiper
--------2019.7.9------------------
方法一:( 请先使用这种方法;更新于2018-05-14)
下载swiper:
npm install swiper --save-dev
swiper4.0使用入口:http://www.swiper.com.cn/usage/index.html;
html:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
在需要使用swiper的组件里引入swiper,swiper的初始化放在mounted里(可以把官网例子的启动 var mySwiper = 删掉);
js:
<script>
import Swiper from 'swiper';
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
mounted(){
new Swiper ('.swiper-container', {
loop: true,
// 如果需要分页器
pagination: '.swiper-paginat