02_rollingBanner
코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.
구문
롤링 슬라이드 배너를 구현해보자
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
</head>
<h1>롤링 슬라이드 배너 만들기</h1>
<div id="banner_wrap">
<div id="frame">
<ul id="banner">
<li>
<a href="#"><img src="roll/1.png" alt="사진1" /></a>
</li>
<li>
<a href="#"><img src="roll/2.png" alt="사진1" /></a>
</li>
<li>
<a href="#"><img src="roll/3.png" alt="사진1" /></a>
</li>
<li>
<a href="#"><img src="roll/4.png" alt="사진1" /></a>
</li>
<li>
<a href="#"><img src="roll/5.png" alt="사진1" /></a>
</li>
<li>
<a href="#"><img src="roll/6.png" alt="사진1" /></a>
</li>
<li>
<a href="#"><img src="roll/7.png" alt="사진1" /></a>
</li>
</ul>
</div>
<p>
<a href="#" class="prev">
<span class="material-symbols-outlined"> arrow_circle_left </span>
</a>
<a href="#" class="next">
<span class="material-symbols-outlined"> arrow_circle_right </span>
</a>
</p>
</div>
<script src='https://code.jquery.com/jquery-3.7.1.min.js'></script>