Update style.css

style.css

@@ -10,25 +10,30 @@ body, html {
 }
 
 .slider-container {
-  width: 90%;
+  width: 80%; /* 슬라이더 컨테이너의 너비를 줄입니다 */
   height: 80%;
   overflow: hidden;
   position: relative;
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .slider {
   display: flex;
-  width: calc(300% + 60px); /* 3 slides and 20px gap between them */
   transition: transform 0.5s ease-in-out;
+  justify-content: flex-start; /* 슬라이드를 왼쪽에서 시작하도록 정렬 */
+  padding: 0 20%; /* 좌우 슬라이드 미리보기를 위해 패딩 추가 */
 }
 
 .slide {
-  width: calc(33.3333% - 40px); /* minus gap */
+  width: 60%; /* 슬라이더 너비를 줄여서 좌우 슬라이드가 보이도록 합니다 */
   height: 100%;
-  margin: 0 20px; /* gap */
+  margin: 0 10px; /* 슬라이드 사이의 간격 */
   background-color: #ccc;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 2em;
-}
+}