<template>
  <div>

<!--     <agile  :speed="500"
    :arrows="false"
    :autoplay="true"  ref="banner" :pauseOnHover="true">
      <div class='agile_slide' v-for='(item, index) in datas' :key='item.href'>
        <img :src='item.href'  style="width: 100%;"/>
      </div>
      <div class="agile_slide ">
        <img style="width: 100%;" src="https://dfiles.tita.gift/Portal/300173/aa84006c8da3412bb603bb00bf65cfd2.jpg" />
      </div>
      <div class="agile_slide agile_slide--1">
        <img style="width: 100%;" src="https://dfiles.tita.gift/Portal/300173/aa84006c8da3412bb603bb00bf65cfd2.jpg" />
      </div>
      <div class="agile_slide agile_slide--1">
        <img style="width: 100%;" src="https://dfiles.tita.gift/Portal/300173/aa84006c8da3412bb603bb00bf65cfd2.jpg" />
      </div>
      <div class="agile_slide agile_slide--1">
        <img style="width: 100%;" src="https://dfiles.tita.gift/Portal/300173/aa84006c8da3412bb603bb00bf65cfd2.jpg" />
      </div>
      <div class="agile_slide agile_slide--1">
        <img style="width: 100%;" src="https://res.cloudinary.com/ssenseweb/image/upload/b_white,c_lpad,g_south,h_1086,w_724/c_scale,h_560/v588/171924M176006_1.jpg" />
      </div>
      <div class="agile_slide agile_slide--1">
        <img style="width: 100%;" src="https://res.cloudinary.com/ssenseweb/image/upload/b_white,c_lpad,g_south,h_1086,w_724/c_scale,h_560/v588/171924M176006_1.jpg" />
      </div>
    </agile> -->
    <!-- <carousel :autoplay='true' :perPage='1' :loop='true'>
      <slide  v-for='(item, index) in datas' :key='item.href'>
        <img style="width: 100%;" src="https://res.cloudinary.com/ssenseweb/image/upload/b_white,c_lpad,g_south,h_1086,w_724/c_scale,h_560/v588/171924M176006_1.jpg" />
      </slide>
    </Carousel> -->
    <!-- <div class="my-slider">
      <div v-for='(item, index) in datas' :key='item.href'>
        <img style="width: 100%;" src="https://res.cloudinary.com/ssenseweb/image/upload/b_white,c_lpad,g_south,h_1086,w_724/c_scale,h_560/v588/171924M176006_1.jpg" />
      </div>
    </div>
  </div> -->
  <mu-banner
  :banner-setting="datas"
  :width="width"
  :height="height">
  </mu-banner>
</div>

</template>
<script>
  //import { Carousel, Slide } from 'vue-carousel';
  // import VueAgile from 'vue-agile/src';
  // import Vue from 'vue';
  //Vue.use(VueAgile);
  // import { tns } from "tiny-slider/src/tiny-slider.module"
  import Banner from 'muse-ui/Banners';
  export default {
    name:'mu-carousel',
    components:{
      'mu-banner':Banner,
    },
    data(){
      return {
        datas:[
        {
          href:'http://dfiles.tita.gift/Portal/300173/aa84006c8da3412bb603bb00bf65cfd2.jpg',
          url:'https://dfiles.tita.gift/Portal/300173/5045687f87e942ad98c7e15454c53691.jpg',
        },
        {
          href:'http://dfiles.tita.gift/Portal/300173/aa84006c8da3412bb603bb00bf65cfd2.jpg',
          url:'https://dfiles.tita.gift/Portal/300173/aa84006c8da3412bb603bb00bf65cfd2.jpg',
        },{
          href:'http://dfiles.tita.gift/Portal/300173/aa84006c8da3412bb603bb00bf65cfd2.jpg',
          url:'https://dfiles.tita.gift/Portal/300173/aa84006c8da3412bb603bb00bf65cfd2.jpg',
        },{
          href:'http://dfiles.tita.gift/Portal/300173/aa84006c8da3412bb603bb00bf65cfd2.jpg',
          url:'https://dfiles.tita.gift/Portal/300173/aa84006c8da3412bb603bb00bf65cfd2.jpg',
        }
        ],
        width: 420,
        height: 224,
      };
    },
    mounted(){
      // this.$nextTick(()=>{
      //   tns({
      //     container: document.querySelector('.my-slider'),
      //     items: 1,
      //     autoplay: true,
      //     autoplay:true,
      //     autoplayHoverPause:true,
      //     lazyload: true,

      //   });
      // });
      // setTimeout(()=>{

      //   this.datas = this.datas.slice(1);

      // }, 5000);
    },
    methods:{

    },

  }
</script>
<style >
*{margin:0;padding:0;}
.tns-outer{padding:0 !important}.tns-outer [hidden]{display:none !important}.tns-outer [aria-controls],.tns-outer [data-action]{cursor:pointer}.tns-outer.ms-touch{overflow-x:scroll;overflow-y:hidden;-ms-overflow-style:none;-ms-scroll-chaining:none;-ms-scroll-snap-type:mandatory;-ms-scroll-snap-points-x:snapInterval(0%, 100%)}.tns-slider{-webkit-transition:all 0s;-moz-transition:all 0s;transition:all 0s}.tns-slider>.tns-item{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.tns-horizontal.tns-subpixel{white-space:nowrap}.tns-horizontal.tns-subpixel>.tns-item{display:inline-block;vertical-align:top;white-space:normal}.tns-horizontal.tns-no-subpixel:after{content:'';display:table;clear:both}.tns-horizontal.tns-no-subpixel>.tns-item{float:left;margin-right:-100%}.tns-no-calc{position:relative;left:0}.tns-gallery{position:relative;left:0}.tns-gallery>.tns-item{position:absolute;left:-100%;-webkit-transition:opacity 0s;-moz-transition:opacity 0s;-webkit-transition:transform 0s, opacity 0s;-moz-transition:transform 0s, opacity 0s;transition:transform 0s, opacity 0s}.tns-lazy-img{-webkit-transition:opacity 0.6s;-moz-transition:opacity 0.6s;transition:opacity 0.6s;opacity:0.6}.tns-lazy-img.loaded{opacity:1}.tns-ah{-webkit-transition:height 0s;-moz-transition:height 0s;transition:height 0s}.tns-ovh{overflow:hidden}.tns-hdx{overflow-x:hidden}.tns-hdy{overflow-y:hidden}.tns-visually-hidden{position:absolute;left:-10000em}.tns-transparent{opacity:0;visibility:hidden}.tns-fadeIn{opacity:1;filter:alpha(opacity=100);z-index:0}.tns-normal,.tns-fadeOut{opacity:0;filter:alpha(opacity=0);z-index:-1}
ul, li {
  list-sytle: none;
  list-style-type:none;
}

</style>
