<template>
  <div class="swiper-main">
     <!-- Swiper -->
     <div class="swiper-containerhor">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item, index) in bannerArray" :key="index">
                <img :src="item.img">
                <el-button>进入直播间</el-button>
                <div class="textzb">
                  <a class="titlezb">主播: {{ item.name }}</a>
                  <a class="contentzb">内容: {{ item.content }}</a>
                </div>
            </div>
        </div>
        <div class="main">
          <span class="swiper-button-prev"></span>
          <span class="swiper-button-next"></span>
        </div>
        <!-- Add Pagination -->
        <!-- <div class="swiper-paginationhor"></div> -->
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import Swiper from 'swiper'
import 'swiper/dist/js/swiper'
import 'swiper/dist/css/swiper.css'
export default {
  name: 'PBannerSwiper',
  props: {
    bannerArray: Array
  },
  data() {
    return { }
  },
  mounted() {
    setTimeout(() => {
        this.initSwiper()
     }, 300)
  },
  methods: {
    handleClickBanner(item, index) {
      window.open(item.link)
    },
    initSwiper() {
      this.mySwiper = new Swiper('.swiper-containerhor', {
        pagination: '.swiper-paginationhor',
        slidesPerView: 5,
        paginationClickable: true,
        prevButton: '.swiper-button-prev',
        nextButton: '.swiper-button-next',
        spaceBetween: 30,
        autoplay: 3000,
        loop: true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
    .swiper-containerhor {
        width: 1200px;
        position: relative;
        overflow: hidden;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
    }
    .swiper-button-prev, .swiper-button-next{
      width: 50px;
      height: 50px;
      position: absolute;
      top: 180px;
      background: url('../../assets/right.png') no-repeat;
      background-size: contain;
    }
    .swiper-button-prev{
        position: absolute;
      background: url('../../assets/left.png') no-repeat;
      background-size: contain;
    }

    .swiper-slide {
          width: 230px;
          margin-right: 20px;
          img {
            width: 230px;
            display: block;
          }
          .el-button {
            margin-left: -73px;
            border: none;
            background: #07CAAF;
            font-size: 18px;
            font-weight: bold;
            color: #FFFFFF;
            padding-top: 0px;
            padding-bottom: 0px;
            width: 146px;
            height: 44px;
            position: absolute;
            top: 310px;
            left: 50%;
          }
          .textzb {
            font-size: 18px;
            font-weight: bold;
            color: #030303;
            line-height: 16px;
            margin-top: 18px;
            line-height: 30px;
            a {
              display: inline-block;
              text-align: center;
              display: block;
            }
            .contentzb{
                margin-top: 10px;
            }
          }

        }
</style>
