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