jQuery带标题文字介绍的图片轮播插件

<div id="wrapper">
<h1>Title</h1>
<div id="slider-wrap">
 <ul id="slider">
<li data-color="#1abc9c">
<div>
<h3>Slide #1</h3>
<span>Sub-title #1</span>
</div>                
<i class="fa fa-image"></i>
</li>
 
<li data-color="#3498db">
<div>
<h3>Slide #2</h3>
<span>Sub-title #2</span>
</div>
<i class="fa fa-gears"></i>
</li>
 
<li data-color="#9b59b6">
<div>
<h3>Slide #3</h3>
<span>Sub-title #3</span>
</div>
<i class="fa fa-sliders"></i>
</li>
 
<li data-color="#34495e">
<div>
<h3>Slide #4</h3>
<span>Sub-title #4</span>
</div>
<i class="fa fa-code"></i>
</li>
 
<li data-color="#e74c3c">
<div>
<h3>Slide #5</h3>
<span>Sub-title #5</span>
</div>
<i class="fa fa-microphone-slash"></i>
</li>
 
 
 </ul>

jQuery带标题文字介绍的图片轮播插件，代码很简洁的一个焦点图切换效果，本例中是以字体图标代替图片，鼠标悬停左右箭头上一张下一张切换按钮会出现。