分享一个最近做外包项目时写的一个响应式轮播图滑块组件,还没加自动播放。后面需要会加。写的比较赶还没优化,质量有限。如下图:
serviceList.vue
<template>
<div id="main">
<i class="fa fa-angle-left fa-2x" @click="leftShift"></i>
<i class="fa fa-angle-right fa-2x" @click="rightShift"></i>
<div id="container">
<div class="title">服务范围</div>
<div class="subtitle" ref="sub">——service——</div>
<div class="slick" ref="slick" @mousedown="move" >
<div :class="[show?'show':'']" v-for="item in msg">
<img :src="item.img" draggable="false" />
<div class="slick_title">{
{item.name}}</div>
<div class="slick_content">{
{item.about}}</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "serviceList",
data(){
return {
show:true,
left:0,
msg:[
{
name:'科技',
img:'https://images.mituo.cn/mui005/upload/201801/1516001587.png',
about:'社会上习惯于把科学和技术联在一起,统称为“科技”。实际二者既有密切联系,又有重要区别。'
},{
name:'建设',
img:'https://images.mitu