롤링 슬라이드 배너

롤링 슬라이드 배너를 구현해보자

HTML
CSS

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