SH_museum/sh_museum/src/components/slide/index.vue

<template>
  <div class="swiper-container">
    <div id="sPrev" class="pagenav" @click="slide('slidePrev')" >
      <img :src="`${$cdn}images/prev.png`"/>
      <img class="active" :src="`${$cdn}images/prev_active.png`" />
    </div>

    <swiper
      ref="listSwiper"
      class="swiper-wrapper swiper-wrapper-n"
      :options="swiperOption"
      v-if="!isMobile"
    >
      <swiper-slide
        class="swiper-slide"
        :class="{'slide-active':index===activeIdx}"
        v-for="(item, index) in list"
        :key="index"
      >
        <img @click="slideto(index)" class="logo" :src="item.thumb"/>
      </swiper-slide>
    </swiper>

    <div id="sNext" class="pagenav" @click="slide('slideNext')">
      <img :src="`${$cdn}images/next.png`" />
      <img class="active" :src="`${$cdn}images/next_active.png`" />
    </div>
  </div>
</template>
<script>
import browser from "@/utils/browser.js";
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
import "swiper/css/swiper.css";

export default {
  props:['list','idx'],
  computed: {
    swiper() {
      return this.$refs.listSwiper.$swiper;
    },
    swiperOption() {
      return {
        slidesPerView: "auto",
        spaceBetween: 30,
        centeredSlides: true,
        centeredSlidesBounds:true,
        centerInsufficientSlides:true,
        // freeMode:true,
        // normalizeSlideIndex: true,
        // slideActiveClass : 'slide-active',
        on: {
          slideChange: function () {
          }
        }
      };
    },
  },
  data() {
    return {
      activeDate: "",
      showNext: 0,
      showPre: 0,
      activeIdx: this.idx,
      nextActive: false,
      prevActive: false,
      isMobile: browser.mobile
    };
  },
  watch:{
    activeIdx(newVal){
      this.$emit('activeItem',this.list[newVal])
    }
  },
  methods: {
    slideto(idx){
      this.swiper.slideTo(idx)
      this.activeIdx = idx
    },
    goto(url) {
      window.open(url, "_blank");
    },
    slide(name){
      if (name==='slideNext') {
        if (this.activeIdx < this.list.length-1) {
          this.activeIdx += 1
        }
        else{
          return
        }
      }else{
        this.activeIdx = this.activeIdx > 0 ? this.activeIdx-1 : this.activeIdx
      }

      this.swiper[name]()
    }
  },
  components: {
    Swiper,
    SwiperSlide,
  },
  directives: {
    swiper: directive,
  },
  mounted() {
   
  },
};
</script>
<style lang="less" scoped>
.swiper-container {
  position: relative;
  margin: 20px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .pagenav{
    display: flex;
    align-items: center;
    position: relative;
    top: 2px;
    img{
      width: 100%;
      cursor: pointer;
    }
    .active{
      opacity: 0;
      position: absolute;
      left: 0;
      top: 0;
    }
    &:hover{
      .active{
        opacity: 1;
      }
    }
  }
}

.swiper-wrapper {
  margin-top: 10px;
  width: calc(100% - 180px);
  display: flex;
  align-items: center;
  padding: 20px 30px;
}

.swiper-slide {
  cursor: pointer;
  font-size: 0;
  position: relative;
  padding: 2px;
  background: #F5EDE2;
  width: 150px;
}

.slide-active {
  border: 2px @theme solid;
  transform: scale(1.2);
}


.swiper-slide img {
  width: 100%;
}
.swiper-slide> div{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}
.swiper-slide .mask{
  background: #804D28;
  opacity: 0.5;
}

.swiper-slide .mask1{
  background: #6e4029;
  opacity: 0.65;
}

.swiper-slide .mask2{
  background: #4b2b13;
  opacity: 0.65;
}

@media screen and (max-width: 500px) {
  .swiper-container {
    .pagenav {
      position: fixed;
      z-index: 888;
      top: 45%;
      img {
        z-index: 888;
        width: 50%;
      }
    }
    #sPrev {
      left: -7vw;
    }
    #sNext {
      right: -10vw;
    }
  }
}

</style>