02 rollingBanner
롤링 슬라이드 배너를 구현해보자
- HTML
- CSS
1 <head>2 <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" />3 </head>4 <h1>롤링 슬라이드 배너 만들기</h1>5 <div id="banner_wrap">6 <div id="frame">7 <ul id="banner">8 <li>9 <a href="#"><img src="roll/1.png" alt="사진1" /></a>10 </li>11 <li>12 <a href="#"><img src="roll/2.png" alt="사진1" /></a>13 </li>14 <li>15 <a href="#"><img src="roll/3.png" alt="사진1" /></a>16 </li>17 <li>18 <a href="#"><img src="roll/4.png" alt="사진1" /></a>19 </li>20 <li>21 <a href="#"><img src="roll/5.png" alt="사진1" /></a>22 </li>23 <li>24 <a href="#"><img src="roll/6.png" alt="사진1" /></a>25 </li>26 <li>27 <a href="#"><img src="roll/7.png" alt="사진1" /></a>28 </li>29 </ul>30 </div>31 <p>32 <a href="#" class="prev">33 <span class="material-symbols-outlined"> arrow_circle_left </span>34 </a>35 <a href="#" class="next">36 <span class="material-symbols-outlined"> arrow_circle_right </span>37 </a>38 </p>39 </div>40
41 <script src='https://code.jquery.com/jquery-3.7.1.min.js'></script>1* {2 margin: 0;3 padding: 0;4 list-style: none;5 box-sizing: border-box;6}7
8ul {9 display: flex;10}11
12h1 {13 text-align: center;14}15
16li {17 flex: 0 0 80px;18}19
20a {21 display: block;22}23
24img {25 width: 100%;26}27
28#banner_wrap {29 width: 300px;30 padding: 10px 20px;31 margin: auto;32 background: #dfdfdf;33}34
35#banner {36 width: calc(80px * 7);37 background: #ff000055;38 height: 80px;39}40
41#frame {42 width: calc(80px * 3);43 height: 80px;44 position: relative;45 background: #10b3ffa1;46 overflow: hidden;47 margin: 10px auto;48}