# 圖片輪播＋時間軸＋文字2固定側邊欄

###### tags: `HyUI`

## HTML範本

<!-- 圖片輪播圖變大 start-->
<section class="mpSlider3 mask">
  <div class="img-container">
    <a href="#" title="">
      <div class="wordcontent">
        <div class="bigword">Seeing myself in you</div>
        <div class="middleword">Snapshots of international cooperation</div>
        <div class="smallword">在世界的『鏡』頭遇見你 國合會國際合作人文印象展</div>
      </div>
      <img src="https://assets.imgix.net/unsplash/umbrella.jpg?w=1400&h=720&fit=crop&auto=format%2Cenhance&usm=20" alt="">
    </a>
  </div>
  <div class="img-container">
    <a href="#" title="">
      <div class="wordcontent align_center">
        <div class="bigword">Seeing myself in you</div>
        <div class="middleword">Snapshots of international cooperation</div>
        <div class="smallword">在世界的『鏡』頭遇見你 國合會國際合作人文印象展</div>
      </div>
      <img src="https://assets.imgix.net/unsplash/transport.jpg?w=1400&h=720&fit=crop&auto=format%2Cenhance&usm=20" alt="">
    </a>
  </div>
  <div class="img-container">
    <a href="#" title="">
      <div class="wordcontent align_bottom">
        <div class="bigword">Seeing myself in you</div>
        <div class="middleword">Snapshots of international cooperation</div>
        <div class="smallword">在世界的『鏡』頭遇見你 國合會國際合作人文印象展</div>
      </div>
      <img src="https://assets.imgix.net/unsplash/motorbike.jpg?q=80&fm=pjpg&usm=20&w=1400&h=720&fit=min" alt="">
    </a>
  </div>
</section>
<!-- 圖片輪播圖變大 end-->