123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133 |
- <template>
- <div>
- <div class="box">
- <div class="Navigation">
- <div class="swiper-container" ><!-- 这边的两个方法是鼠标移入和移出 -->
- <div class="swiper-wrapper">
- <div class="swiper-slide" v-for="(item,index) in arr" :key="index">
- <img :src="item.img_url" alt="" >
- </div>
- </div>
- <!-- 指示点 -->
- <div class="swiper-pagination"></div><!--分页器。如果放置在swiper-container外面,需要自定义样式。-->
- </div>
- </div>
- </div>
- </div>
- </template>
-
- <script>
- import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
- import 'vue-awesome-swiper/node_modules/swiper/dist/css/swiper.css'
- export default {
- // name: "ecology",
- name: "ecology",
- data () {
- return {
- swiper:'',
- index:'',
- arr:[
- {img_url:require('@/assets/logo.png')},
- {img_url:require('@/assets/logo.png')},
- {img_url:require('@/assets/logo.png')},
- {img_url:require('@/assets/logo.png')},
- {img_url:require('@/assets/logo.png')}
- ]
- }
- },
- mounted() {
- this.initData()
- },
- methods:{
- initData(){
- // this.swiper = new Swiper(".swiper-container", {
- // autoplay: {//自动轮播
- // disableOnInteraction: false,//当设置为false时,用户操作之后(swipes,arrow以及pagination 点击)autoplay不会被禁掉,用户操作之后每次都会重新启动autoplay。
- // },
- // pagination: {//指示点
- // el: '.swiper-pagination',
- // },
- // grabCursor : true,//鼠标覆盖Swiper时指针会变成手掌形状,拖动时指针会变成抓手形状
- // loop: true,
- // // 如果需要前进后退按钮
- // navigation: {
- // nextEl: '.swiper-button-next',
- // prevEl: '.swiper-button-prev',
- // },
- // });
- var swiper = new Swiper('.swiper-container', {
- slidesPerView: 4,
- spaceBetween: 0,
- centeredSlides: true,
- loop: true,
- pagination: {
- el: '.swiper-pagination',
- clickable: true,
- },
- });
- },
- comtainer_enter(){
- this.swiper.autoplay.stop();
- setTimeout(this.comtainer_leave,2000 );//两秒加上默认的三秒
- },
- comtainer_leave () {
- this.swiper.autoplay.start();
- }
- }
- }
- </script>
-
- <!-- Add "scoped" attribute to limit CSS to this component only -->
- <style scoped>
- body {
- margin: 0;
- }
- .box {
- width: 100%;
- height: 300px;
- font-size: 15px;
- font-family: 'PingFangSC-Regular','Avenir', Helvetica, Arial, sans-serif;
- position: relative;
- }
- .Navigation {
- width: 80%;
- height: 400px;
- position: absolute;
- left: 50%;
- transform: translate(-50%,0);
- top: 0;
- background-color: rgba(69,113,155,0.2);
- }
- /* .swiper-container {
- width: 800px;
- height: 100px;
- margin: 20px auto;
- } */
- .swiper-container {
- width: 100%;
- height: 100%;
- }
- .swiper-slide {
- text-align: center;
- font-size: 18px;
- /* Center slide text vertically */
- display: -webkit-box;
- display: -ms-flexbox;
- display: -webkit-flex;
- display: flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- -webkit-justify-content: center;
- justify-content: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- -webkit-align-items: center;
- align-items: center;
- transition: 300ms;
- transform: scale(0.8);
- }
- .swiper-slide-active,.swiper-slide-duplicate-active{
- transform: scale(1);
- }
- </style>
-
|