2. rollingBanner
롤링 슬라이드 배너를 구현해보자
HTML
<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>
CSS
* {
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;
}