1 Carousel achieve pure css
<div id="container">
<div id="photo">
<img src="img/1.png" />
<img src="img/2.png" />
<img src="img/3.png" />
</div>
</div>
style
#container{
width:1000px;
height:300px;
overflow:hide;
}
#photo{
width:3000px;
height:300px;
animation: switch 5s ease-out infinite
}
img{
float:left;
width:100%;
height:300px;
}
@keyframes switch{
0%,25%{
margin-left:0px;
}
40%,65%{
margin-left:-1000px;
}
75%,100%{
margin-left:-2000px;
}
}
2. vant plug
Introduced
import { Swipe, SwipeItem } from 'vant';
Vue.use(Swipe).use(SwipeItem);
<van-swipe :autoplay="3000" indicator-color="white">
<van-swipe-item>1</van-swipe-item>
<van-swipe-item>2</van-swipe-item>
<van-swipe-item>3</van-swipe-item>
<van-swipe-item>4</van-swipe-item>
</van-swipe>
3. Plug swiper
Global introduction
import Vue from 'vue'
import vueSwiper from 'vue-awesome-swiper' /* 样式的话，我这里有用到分页器，就在全局中引入了样式 */ import 'swiper/dist/css/swiper.css' Vue.use(vueSwiper);
- Use the template in
-
<swiper :options="swiperOption" class="swiper-wrap" ref="mySwiper" v-if="banner.length!=0"> <swiper-slide v-for="(item,index) in banner" :key="index" > <img :src="item.image" alt="" /> </swiper-slide> <!-- 常见的小圆点 --> <div class="swiper-pagination" v-for="(item,index) in banner" :key="index" slot="pagination" ></div> </swiper> <!-- 显示数字 --> <div class="number">{{imgIndex}}/{{detailimages.length}}</div> - configuration data
-
data() { const that = this; return { imgIndex: 1, swiperOption: { //是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true notNextTick: true, //循环 loop: true, //设定初始化时slide的索引 initialSlide: 0, //自动播放 autoplay: { delay: 1500, stopOnLastSlide: false, /* 触摸滑动后是否继续轮播 */ disableOnInteraction: false }, //滑动速度 speed: 800, //滑动方向 direction: "horizontal", //小手掌抓取滑动 grabCursor: true, on: { //滑动之后回调函数 slideChangeTransitionStart: function() { /* realIndex为滚动到当前的slide索引值 */ that.imgIndex= this.realIndex - 1; }, }, //分页器设置 pagination: { el: ".swiper-pagination", clickable: true, type: "bullets" } } }; },