[CSS] 스크린 바깥으로 배치하는 방법은?!(슬라이드 구성)

아래의 경우를 살펴보자. 스크린 바깥으로 쭉 그림을 배치하려면 어떻게 해야할까?

정답 : overflow 옵션을 사용하고, scrollbar를 지운다.

    <div className='main_wrapper'>
        <div className="row__posters">
          {list.map((elem,index) => (
              <div className='row__poster'>
                <div className='box'>{elem}</div>
              </div>
          ))}
        </div>
    </div>

▶ 이렇게 main_wrapper와 row_posters가 있다고 가정하자. 그리고 row__poster는 map함수를 이용하여 쭉 나열해줬다.

.row__posters {
  display: flex;
  overflow-y: hidden;
  overflow-x: scroll;
  padding: 20px 0 20px 20px;
  scroll-behavior: smooth;
}

.row__posters::-webkit-scrollbar {
  display: none;
}

.row__poster {
  display:flex;
  object-fit: contain;
  width: 100%;
  max-height: 144px;
  margin-right: 10px;
  transition: transform 450ms;
  border-radius: 4px;
  background-color: antiquewhite;
}

▶ 그리고 CSS는 위와 같이 작성해준다.

▶ 눈 여겨볼 사항은 row__posters의 overflow-x:scroll이다. x방향으로 넘치는 것은 scroll을 이용해서 보여준다.

▶ but 바로 밑에 row__posters::-webkit-scrollbar에 display:none을 줌으로써 스크롤바가 없게 한다. 그래서 실제로 화면에서는 그림들이 넘치게 구성되도록 구현할 수 있다!
▶ 이를 잘 이용하면 슬라이드를 구성할 수 있다.

---

## 하지만, 이미 Swiper 라이브러리가 있다.

1. npm install swiper --save로 모듈을 설치
2. 컴포넌트와 css를 import 해준다.
3. 정해진 작성 양식에 의해서 작성

import { Navigation, Pagination, Scrollbar, A11y } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
// Import Swiper styles
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/scrollbar";

      <Swiper 
        // install Swiper modules
        modules={[Navigation, Pagination, Scrollbar, A11y]}
        loop={true} // loop 기능을 사용할 것인지
        breakpoints={{
          1378: {
            slidesPerView: 6, // 한번에 보이는 슬라이드 개수
            slidesPerGroup: 6, // 몇개씩 슬라이드 할지
          },
          998: {
            slidesPerView: 5,
            slidesPerGroup: 5,
          },
          625: {
            slidesPerView: 4,
            slidesPerGroup: 4,
          },
          0: {
            slidesPerView: 3,
            slidesPerGroup: 3,
          },
        }}
        navigation  // arrow 버튼 사용 유무 
        pagination={{ clickable: true }} // 페이지 버튼 보이게 할지 
      >
        <div id={id} className="row__posters">
          {movies.map((movie) => (
            <SwiperSlide>
              <img
                key={movie.id}
                style={{ padding: "25px 0" }}
                className={`row__poster ${isLargeRow && "row__posterLarge"}`}
                src={`https://image.tmdb.org/t/p/original/${
                  isLargeRow ? movie.poster_path : movie.backdrop_path
                } `}
                alt={movie.name}
                onClick={() => handleClick(movie)}
              />
            </SwiperSlide>
          ))}
        </div>
      </Swiper>