# 롤링 슬라이드 배너

<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>

* {
	margin: 0;
	padding: 0;
	list-style: none;
	box-sizing: border-box;
}

ul {
	display: flex;
}

h1 {
	text-align: center;
}

li {
	flex: 0 0 80px;
}

a {
	display: block;
}

img {
	width: 100%;
}

#banner_wrap {
	width: 300px;
	padding: 10px 20px;
	margin: auto;
	background: #dfdfdf;
}

#banner {
	width: calc(80px * 7);
	background: #ff000055;
	height: 80px;
}

#frame {
	width: calc(80px * 3);
	height: 80px;
	position: relative;
	background: #10b3ffa1;
	overflow: hidden;
	margin: 10px auto;
}