育將電腦工作室 - 線上書籍

套件說明
====

1. [官網](https://woocommerce.com/flexslider/)
2. [DEMO](http://flexslider.woothemes.com/?_ga=2.5651891.1622490122.1535117219-1985304457.1535117219)
3. [GitHub](https://github.com/woocommerce/FlexSlider)
4. 引入 ```
  <pre class="brush:as3;">
  
          <link rel="stylesheet" href="<{xoImgUrl}>assets/plugins/flexslider/flexslider.css">
  ```
  
   ```
  <pre class="brush:as3;">
  
          <script type="text/javascript" src="<{xoImgUrl}>assets/plugins/flexslider/jquery.flexslider-min.js"></script>
  ```
5. 調用插件 ```
  <pre class="brush:as3;">
  
          <script type="text/javascript">
            $(document).ready(function() {            
              /* ======= Flexslider ======= */
              $('.flexslider').flexslider({
                  animation: "fade"
              });
            });
          </script> 
  ```
6. html ```
  <pre class="brush:as3;">
  
          <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>
          </div>
  ```
7.

Title1

Title2

Title3

Title1

Title2

Title3

MarkDown