套件說明
- 官網
- DEMO
- GitHub
- 引入
<link rel="stylesheet" href="<{xoImgUrl}>assets/plugins/flexslider/flexslider.css">
<script type="text/javascript" src="<{xoImgUrl}>assets/plugins/flexslider/jquery.flexslider-min.js"></script>
- 調用插件
<script type="text/javascript">
$(document).ready(function() {
/* ======= Flexslider ======= */
$('.flexslider').flexslider({
animation: "fade"
});
});
</script>
- html
<div id="promo-slider" class="slider flexslider">
<ul class="slides">
<li>
<img src="<{xoImgUrl}>assets/images/slides/slide-1.jpg" alt="" />
<p class="flex-caption">
<span class="main" >Join College Green Online</span>
<br />
<span class="secondary clearfix" >Choose from over 100 online and offline courses</span>
</p>
</li>
<li>
<img src="<{xoImgUrl}>assets/images/slides/slide-2.jpg" alt="" />
<p class="flex-caption">
<span class="main" >Come to our Open Days</span>
<br />
<span class="secondary clearfix" >Donec accumsan nunc sed ipsum dapibus consectetur</span>
</p>
</li>
<li>
<img src="<{xoImgUrl}>assets/images/slides/slide-3.jpg" alt="" />
<p class="flex-caption">
<span class="main" >Discover online courses</span>
<br />
<span class="secondary clearfix" >Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
</p>
</li>
<li>
<img src="<{xoImgUrl}>assets/images/slides/slide-4.jpg" alt="" />
<p class="flex-caption">
<span class="main" >Nam ultricies accumsan pellentesque</span>
<br />
<span class="secondary clearfix" >In justo orci, ornare vitae nulla sed, suscipit suscipit augue</span>
</p>
</li>
</ul><!--//slides-->
</div><!--//flexslider-->
-