<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  @import "./hello.scss";
</style>

<!-- Template -->
<template>
  <div class="view-container container text-center">

    <b-card>Hello Stock Capital - IO PLATFORM (FE)</b-card>


    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img style="width: 300px;" data-src="../../../../../static/images/swiper/1.jpg" class="swiper-lazy">
          <div class="swiper-lazy-preloader"></div>
        </div>
        <div class="swiper-slide">
          <img style="width: 300px;" data-src="../../../../../static/images/swiper/2.jpg" class="swiper-lazy">
          <div class="swiper-lazy-preloader"></div>
        </div>
        <div class="swiper-slide">
          <img style="width: 300px;" data-src="../../../../../static/images/swiper/3.jpg" class="swiper-lazy">
          <div class="swiper-lazy-preloader"></div>
        </div>
        <div class="swiper-slide">
          <img style="width: 300px;" data-src="../../../../../static/images/swiper/4.jpg" class="swiper-lazy">
          <div class="swiper-lazy-preloader"></div>
        </div>
        <div class="swiper-slide">
          <img style="width: 300px;" data-src="../../../../../static/images/swiper/5.jpg" class="swiper-lazy">
          <div class="swiper-lazy-preloader"></div>
        </div>
      </div>
      <div class="swiper-button-prev"></div><!--左箭头-->
      <div class="swiper-button-next"></div><!--右箭头-->
      <div class="swiper-scrollbar"></div>
    </div>

  </div>
</template>

<!-- Script -->
<script>
  import {mapGetters} from 'vuex';

  import Swiper from 'swiper';
  import 'swiper/dist/css/swiper.min.css';

  const _Hello = {
    name: 'Hello',
    created: function () {
    },
    updated: function () {
    },
    mounted: function () {
      var mySwiper = new Swiper('.swiper-container', {
        autoplay: true,
        loop: true,
        speed: 500,
        spaceBetween: 10,
        centeredSlides: false,
        slidesPerView: 3,
        effect: 'coverflow',
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        scrollbar: {
          el: '.swiper-scrollbar',
        },
        lazy: {
          loadPrevNext: true,
        }
        //Enable 3D Flow
        // tdFlow: {
        //   rotate: 10,
        //   stretch: -50,//每个slide之间拉伸值（负值远离）
        //   depth: 400,  //值越大图片越往后退（可负值）
        //   modifier: 1,
        //   shadows: true
        // }
      });
    },
    activated: function () {
    },
    data: function () {
      return {};
    },
    methods: {},
    components: {
      Swiper
    },
    computed: {
      ...mapGetters([])
    }
  };
  export default _Hello;
</script>
