时间：2023-09-06 03:12:01 | 来源：网站运营
时间：2023-09-06 03:12:01 来源：网站运营
仅使用CSS制作轮播：在不使用JavaScript或其他库的情况下，如何使用HTML布局和CSS属性制作轮播图，精心制作，实际运用中也未尝不可！上次文章提到关于“CSS Scroll Snapping滚动吸附锁定元素或位置”，今天借此属性在不使用JavaScript或相关库的情况下实现图片轮播效果。
在线咨询
<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设置.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即可。关键词：使用
