[SCSS] 슬라이더 이미지 만들기

HTML

     <!-- 스와이프 슬라이드메뉴 -->
        <div class="slider">
          <div class="list">
            <div class="item" style="--position: 1">
              <img src="img/swiper-1.jpg" />
            </div>
            <div class="item" style="--position: 2">
              <img src="img/swiper-2.jpg" />
            </div>
            <div class="item" style="--position: 3">
              <img src="img/swiper-3.jpg" />
            </div>
            <div class="item" style="--position: 4">
              <img src="img/swiper-4.jpg" />
            </div>
            <div class="item" style="--position: 5">
              <img src="img/swiper-5.jpg" />
            </div>
            <div class="item" style="--position: 6">
              <img src="img/swiper-6.jpg" />
            </div>
            <div class="item" style="--position: 7">
              <img src="img/swiper-7.jpg" />
            </div>
            <div class="item" style="--position: 8">
              <img src="img/swiper-8.jpg" />
            </div>
            <div class="item" style="--position: 9">
              <img src="img/swiper-9.jpg" />
            </div>
            <div class="item" style="--position: 10">
              <img src="img/swiper-10.jpg" />
            </div>
            <!-- 반복을 위해 처음 5개 이미지를 추가 -->
            <div class="item" style="--position: 1">
              <img src="img/swiper-1.jpg" />
            </div>
            <div class="item" style="--position: 2">
              <img src="img/swiper-2.jpg" />
            </div>
            <div class="item" style="--position: 3">
              <img src="img/swiper-3.jpg" />
            </div>
            <div class="item" style="--position: 4">
              <img src="img/swiper-4.jpg" />
            </div>
            <div class="item" style="--position: 5">
              <img src="img/swiper-5.jpg" />
            </div>
          </div>
        </div>

포지션 쓴거 신경 X

지워주기 

내가 짠 오류 코드

//  <!-- 스와이프 슬라이드메뉴 -->
.slider {
  background-color: $main_color;
  overflow: hidden;
  height: 250px;
  margin: auto; /* 슬라이더를 가운데 정렬 */
  display: grid; /* 그리드 레이아웃 사용 */
  place-items: center; /* 아이템을 가운데로 정렬 */
  width: 90%; /* 슬라이더의 너비를 부모 요소의 90%로 설정 */
  .list {
    display: flex;
    width: calc(250px * 10);
    animation: scroll 40s linear infinite; /* 40초 동안 linear(선형) 무한히 반복하는 애니메이션 설정 */
  }
  .item {
    height: 200px; /* 슬라이드의 높이 설정 */
    width: 250px; /* 슬라이드의 너비 설정 */
    padding: 15px; /* 슬라이드 안쪽 여백 설정 */
    perspective: 100px;
    img {
      width: 100%;
      transition: transform 1s;
    }
  }
}
@keyframes scroll {
  0% {
    transform: translate3d(0, 0, 0);
  } // 확인하기.
  100% {
    transform: translateX(calc(-250px * 5));
  }
}

수정 코드 (1) 

//  <!-- 스와이프 슬라이드메뉴 -->
.slider {
  background-color: $main_color;
  overflow: hidden;
  height: 250px;
  margin: auto; /* 슬라이더를 가운데 정렬 */
  display: grid; /* 그리드 레이아웃 사용 */
  place-items: center; /* 아이템을 가운데로 정렬 */
  width: 90%; /* 슬라이더의 너비를 부모 요소의 90%로 설정 */
  .list {
    display: flex;
    width: calc(250px * 15);
    animation: scroll 40s linear infinite; /* 40초 동안 linear(선형) 무한히 반복하는 애니메이션 설정 */
  }
  .item {
    height: 250px; /* 슬라이드의 높이 설정 */
    width: 250px; /* 슬라이드의 너비 설정 */
    padding: 15px; /* 슬라이드 안쪽 여백 설정 */
    perspective: 100px;
    img {
      width: 100%;
      transition: transform 1s;
    }
  }
}
@keyframes scroll {
  0% {
    transform: translate3d(0, 0, 0);
  } // 확인하기.
  100% {
    transform: translateX(calc(-250px * 10));
  }
}

---

차이점

첫 번째 코드와 두 번째 코드의 주요 차이점은

.list의 width와 애니메이션의 translateX 값입니다.

첫 번째 코드

.list {
  width: calc(250px * 10);
  animation: scroll 40s linear infinite;
}

@keyframes scroll {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translateX(calc(-250px * 5));
  }
}

두 번째 코드

.list {
  width: calc(250px * 15);
  animation: scroll 40s linear infinite;
}

@keyframes scroll {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translateX(calc(-250px * 10));
  }
}

list의 너비를 width * 이미지 개수로 설정한 이유는

슬라이드의 각 항목(.item)이 정확하게 리스트 안에 배치되도록 하기 위함입니다.

이렇게 하면 슬라이드가 이동할 때 이미지가 끊기지 않고 자연스럽게 이어질 수 있습니다.

이미지 개수와 애니메이션 이동 거리

리스트에 실제로 포함된 이미지 개수는 15개입니다.

이 중 처음 10개의 이미지는 고유한 이미지이고, 마지막 5개의 이미지는 반복된 이미지입니다.

애니메이션이 자연스럽게 반복되도록 하기 위해,

전체 이미지의 절반이나 고유 이미지의 개수에 맞춰 이동 거리를 설정하는 경우도 있지만,

이 경우에는 이미지가 자연스럽게 반복될 수 있도록 전체 고유 이미지 수를 기준으로 이동 거리를 설정한 것입니다.

왜 10개 이동하는가?

리스트의 전체 너비를 calc(250px * 15)로 설정하고,

애니메이션의 이동 거리를 translateX(calc(-250px * 10))로 설정한 이유는 다음과 같습니다:

1. 연속적인 순환: 애니메이션이 한 주기 동안 고유한 10개의 이미지를 모두 보여준 후,
2. 반복된 이미지 5개를 통해 자연스럽게 다시 처음 이미지로 돌아옵니다.
3. 이렇게 하면 슬라이드가 매끄럽고 자연스럽게 반복됩니다.
4. 부드러운 전환: 애니메이션이 끝난 후 다시 시작할 때,
5. 리스트의 처음과 끝이 자연스럽게 연결되도록 합니다.
6. 이렇게 하면 사용자는 슬라이드가 끊김 없이 연속적으로 진행되는 것처럼 느낄 수 있습니다.

이미지와 리스트 구성

• 리스트에 포함된 이미지는 총 15개입니다.
  • 고유 이미지: 10개
  • 반복된 이미지: 5개

각 이미지의 너비가 250px이라면, 전체 리스트의 너비는 다음과 같이 계산됩니다:

width=250px×15=3750px\text{width} = 250\text{px} \times 15 = 3750\text{px}width=250px×15=3750px

애니메이션의 원리

1. 리스트의 너비:
   • 리스트의 너비를 전체 이미지 개수(15개)와 각 이미지의 너비(250px)를 곱하여 설정합니다.
   • 따라서, 리스트의 너비는 3750px입니다.
2. 애니메이션 이동 거리:
   • 애니메이션의 이동 거리 translateX(calc(-250px * 10))은 10개의 이미지를 이동하는 것입니다.
   • 따라서, 이동 거리는 -2500px입니다.

왜 10개의 이미지를 이동하는가?

• 고유 이미지 10개와 반복된 이미지 5개로 리스트를 구성한 이유는
• 애니메이션이 자연스럽게 반복되도록 하기 위함입니다.
• 애니메이션이 10개의 이미지를 이동한 후, 반복된 5개의 이미지가 나옵니다.
• 이 반복된 이미지는 고유 이미지의 처음 5개와 동일하므로,
• 애니메이션이 처음 상태로 돌아오는 것처럼 보이게 됩니다.