|
板凳
楼主 |
发表于 2019-3-31 23:00:48
|
只看该作者
- <template>
- <div class="certify">
- <swiper :options="swiperOption" ref="mySwiper">
- <swiper-slide class="swiper-slide">
- <img src="images/certify01.png">
- </swiper-slide>
- <swiper-slide class="swiper-slide">
- <img src="images/certify01.png">
- </swiper-slide>
- <swiper-slide class="swiper-slide">
- <img src="images/certify01.png">
- </swiper-slide>
- <swiper-slide class="swiper-slide">
- <img src="images/certify01.png">
- </swiper-slide>
- <swiper-slide class="swiper-slide">
- <img src="images/certify01.png">
- <div class="all_text">全部></div>
- </swiper-slide>
- </swiper>
- </div>
- </template>
- <script>
- import { swiper, swiperSlide } from "vue-awesome-swiper";
- import "swiper/dist/css/swiper.css";
- export default {
- components: {
- swiper,
- swiperSlide
- },
- data() {
- return {
- swiperOption: {
- watchSlidesProgress: true,
- slidesPerView: "auto",
- centeredSlides: true,
- loop: false,
- loopedSlides: 5,
- autoplay: false,
- }
- };
- },
- computed: {
- swiper() {
- return this.$refs.mySwiper.swiper;
- }
- },
- mounted() {
- this.swiper.on("progress", function() {
- for (let i = 0; i < this.slides.length; i++) {
- let slide = this.slides.eq(i);
- let slideProgress = this.slides[i].progress;
- let modify = 1;
- if (Math.abs(slideProgress) > 1) {
- modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
- }
- let translate = slideProgress * modify * 260 + "px";
- let scale = 1 - Math.abs(slideProgress) / 5;
- let zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
- slide.transform("translateX(" + translate + ") scale(" + scale + ")");
- slide.css("zIndex", zIndex);
- slide.css("opacity", 1);
- if (Math.abs(slideProgress) > 3) {
- slide.css("opacity", 0);
- }
- }
- });
- this.swiper.on("setTransition", function(transition) {
- for (var i = 0; i < this.slides.length; i++) {
- var slide = this.slides.eq(i);
- slide.transition(transition);
- }
- });
- }
- };
- </script>
- <style>
- .certify {
- position: relative;
- width: 375px;
- margin: 0 auto;
- }
- .certify .swiper-slide {
- position: relative;
- width: 30vw;
- height: 150px;
- background: #fff;
- box-shadow: 0 2px 4px #ddd;
- }
- .certify .swiper-slide img {
- display: block;
- width: 100%;
- height: 100%;
- }
- .all_text {
- position: relative;
- top: -50%;
- }
- </style>
复制代码
这是完整的代码 |
|