vue轮播图中间大两头小

• Z时代
• 2024-01-10
• 分类：综合

<template>
  <div v-if="items.length" class="full-page-slide-wrapper">
    <swiper :options="swiperOption" ref="mySwiper">
      <!-- slides -->
      <template v-for="item in items">
        <swiper-slide v-if="item.bannerImageUrl" :key="item.pid">
          <img @click="toTopic(item)" :src="item.bannerImageUrl" alt>
        </swiper-slide>
      </template>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>
<script type="text/ecmascript-6">
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import { getFirstConfig } from '@/services/main.service'
const COMPONENT_NAME = 'pull-page-slide'
export default {
  name: COMPONENT_NAME,
  data () {
    return {
      items: [],
      defaultIndex: 0,
      swiperOption: {
        direction: 'horizontal',
        loop: true,
        autoplay: 5000,
        slidesPerView: 'auto',
        centeredSlides: true,
        spaceBetween: 10,
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
          bulletActiveClass: 'slide_dot_active',
          bulletClass: 'slide_dot'
        }
      }
    }
  },
  mounted () {
    this.getConfig()
  },
  components: {
    swiper,
    swiperSlide
  },
  methods: {
    handleClick () {
    },
    toTopic (item) {
      if (item.topicId) {
        this.$router.push({ name: 'topic.detail', params: { id: item.topicId } })
      }
    },
    async getConfig () {
      let { datas } = await getFirstConfig().catch(e => console.error(e))
      this.items = datas
    }
  }
}
</script>
<style lang="scss">
.full-page-slide-wrapper {
  width: 100%;
  height: 140px;
background: white;
  box-sizing: content-box;
  padding-top: 15px;
  margin-top: 10px;
  position: relative;
  overflow: hidden;
  .swiper-container {
    width: 100%;
    height: 100%;
    .swiper-wrapper {
      display: flex;
      align-items: center;
    }
    .swiper-slide {
      width: calc(100% - 50px);
      border-radius: 5px;
    }
    .swiper-slide-prev {
      height: 90% !important;
    }
    .swiper-slide-next {
      height: 90% !important;
    }
  }
  img {
    object-fit: fill;
    height: 100%;
    width: 100%;
    border-radius: 5px;
  }
  .slide_dot {
    display: inline-block;
    margin: 5px;
    width: 3px;
    height: 3px;
    background-color: #f2f2f2;
    border-radius: 50%;
    opacity: 0.5;
  }
  .swiper-pagination {
    bottom: 0;
  }
  .slide_dot_active {
    display: inline-block;
    width: 7px;
    height: 3px;
    border-radius: 5px;
    background: white;
    opacity: 1;
  }
}
</style>

图例

以上是 vue轮播图中间大两头小 的全部内容， 来源链接： utcz.com/z/380905.html