css輪播圖_僅使用CSS制作輪播

在不使用JavaScript或其他庫的情況下，如何使用HTML布局和CSS屬性制作輪播圖，精心制作，實際運用中也未嘗不可！

僅使用CSS制作輪播 - By DeathGhost​www.deathghost.cn

上次文章提到關于“CSS Scroll Snapping滾動吸附鎖定元素或位置”，今天借此屬性在不使用JavaScript或相關庫的情況下實作圖檔輪播效果。

首先通過HTML與CSS實作基礎布局設計，設計結構，左側縮略導航圖，右側展示其完整視覺圖檔。

這裡同樣借助上篇文章提到的“CSS Grid 二維網格結構布局”方法。

HTML結構

側邊欄縮略圖，主體部分為視覺主圖區域。

<main class="wrap">
  <aside>
    <ul>
      <li>
        <a href="#one" target="_blank" rel="external nofollow" >
	  <img src="001.jpg">
	</a>
      </li>
      <li>
       <a href="#two" target="_blank" rel="external nofollow" >
	 <img src="002.jpg">
       </a>
      </li>
      <li>
	<a href="#three" target="_blank" rel="external nofollow" >
	  <img src="003.jpg">
	</a>
      </li>
      <li>
        <a href="#four" target="_blank" rel="external nofollow" >
	  <img src="004.jpg">
	</a>
      </li>
      <li>
	<a href="#five" target="_blank" rel="external nofollow" >
	  <img src="005.jpg">
	</a>
      </li>
    </ul>
  </aside>
  <section>
    <img id="one" src="001.jpg">
    <img id="two" src="002.jpg">
    <img id="three" src="003.jpg">
    <img id="four" src="004.jpg">
    <img id="five" src="005.jpg">
  </section>
</main>
           

CSS設定

通過CSS Grid布局以及CSS Scroll Snapping屬性設定。

.wrap{
	background:rgb(37, 36, 36);
	width:640px;
	height:354px;
	display: grid;
	grid-template-columns: 1fr 5fr;
}
.wrap img{
	width: auto;
	max-width: 100%;
	height: auto;
}
.wrap section{
	height: 100%;
	overflow: auto;
	scroll-snap-type: y mandatory;
}
.wrap section img{
	object-fit: cover;
	height: 100%;
	scroll-snap-align: start;
}
           

需要注意的是布局

grid-template-columns: 1fr 5fr

;圖檔滾動包裹

scroll-snap-type: y mandatory

;以及圖檔展示

object-fit: cover

的設定。

效果

僅使用CSS制作輪播https://www.zhihu.com/video/1239347598030905344

最後我們可以将其圖檔滾動變得平滑一點，我們在視覺圖區域包裹設定

scroll-behavior: smooth

即可。

http://weixin.qq.com/r/hUzj_4nEcNQPrc2Y9xmX (二維碼自動識别)