👻 DeathGhost

仅使用CSS制作轮播

这篇文章发布于

DeathGhost 编辑, 归类于CSS » 当前评论0条。

在不使用JavaScript或其他库的情况下,如何使用HTML布局和CSS属性制作轮播图,精心制作,实际运用中也未尝不可!

上次文章提到关于“CSS Scroll Snapping滚动吸附锁定元素或位置”,今天借此属性在不使用JavaScript或相关库的情况下实现图片轮播效果。

CSS轮播图
仅CSS轮播图

首先通过HTML与CSS实现基础布局设计,设计结构,左侧缩略导航图,右侧展示其完整视觉图片。

这里同样借助上篇文章提到的“CSS Grid 二维网格结构布局”方法。

HTML结构

侧边栏缩略图,主体部分为视觉主图区域。

<main class="wrap">
  <aside>
    <ul>
      <li>
        <a href="#one">
	  <img src="001.jpg">
	</a>
      </li>
      <li>
       <a href="#two">
	 <img src="002.jpg">
       </a>
      </li>
      <li>
	<a href="#three">
	  <img src="003.jpg">
	</a>
      </li>
      <li>
        <a href="#four">
	  <img src="004.jpg">
	</a>
      </li>
      <li>
	<a href="#five">
	  <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的设置。

效果

最后我们可以将其图片滚动变得平滑一点,我们在视觉图区域包裹设置scroll-behavior: smooth即可。

在任何媒介以任何形式复制、发行本作品。惟须遵守下列条件:
署名 — 您必须给出适当的署名,提供指向本许可协议的链接,同时标明是否(对原始作品)作了修改。您可以用任何合理的方式来署名,但是不得以任何方式暗示许可人为您或您的使用背书。
非商业性使用 — 您不得将本作品用于商业目的。
禁止演绎 — 如果您 再混合、转换、或者基于该作品创作,您不可以分发修改作品。

©️ DeathGhost 署名-非商业性使用-禁止演绎(CC BY-NC-ND)

当前共获取0条评论。

🙏 到访,就是一种鼓励,谢谢你的到访!🙏

💕与君共勉💕