3-3 FlexSlider

1. 官網
2. DEMO
3. GitHub
4. 引入

   
           <link rel="stylesheet" href="<{xoImgUrl}>assets/plugins/flexslider/flexslider.css">

    

   
           <script type="text/javascript" src="<{xoImgUrl}>assets/plugins/flexslider/jquery.flexslider-min.js"></script>

    

5. 調用插件

   
           <script type="text/javascript">
             $(document).ready(function() {            
               /* ======= Flexslider ======= */
               $('.flexslider').flexslider({
                   animation: "fade"
               });
             });
           </script> 

    

6. 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-->

    

7.