最簡單的flexslider輪播圖

<template>
  <div>
     <div class="flexslider slider">
           <ul class="slides opq">
        <li><img src="../../images/homecase/8.jpg" /></li>
        <li><img src="../../images/homecase/7.jpg" /></li>
      </ul>
</div>

  </div>
</template>

<script>
import "../../static/flexslider.css"
import "../../static/animate.css"
import Flexslider from "../../static/jquery.flexslider-min"
export default {
  data() {
     return {
         value1: 0
     }
  },
  methods:{ 
  },
 mounted(){
    $(function(){
        $('.flexslider').flexslider({
                    animation: 'slide',                 // 必備參數,自動滑動
                    slideshowSpeed: 2000,              // 每次自動滑動間隔時間,默認爲 7000,單位爲 ms
                    animationSpeed: 1000,              // 手動點擊滑動時間,默認爲 600,單位爲 ms
                    //itemWidth: 900                  // 定義每個 item 寬度,單位爲 px,默認爲 100%
                    slideshow: true,                //載入頁面時,是否自動播放
                    directionNav: true             //是否顯示左右控制按鈕
        })
    })
  
 }
  
}
</script>

<style scoped>
.slider{
  width: 50%;
}
</style>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章