다중슬라이드 만들기

slick 라이브러리를 사용하여 다중 슬라이드를 만드는 방법과 슬라이드를 float로 정렬하는 방법 기록

---

1. Slick 라이브러리 사용하여 다중 슬라이드 만들기

먼저. Slick을 사용하여 세 개의 슬라이드를 구현합니다.

 

HTML구조

<article class="slidePage1">
    <div class="row">
        <ul class="tapTitle">
            <li class="on"><a href="javascript:;">NEW PRODUCT</a></li>
            <li><a href="javascript:;">EVENT</a></li>
            <li><a href="javascript:;">HAITAI MALL</a></li>
        </ul>
        <div class="slideContainer1">
            <div class="productSlideOuter tapContent on">
                <div class="productSlideInner">
                    <div class="productSlide">
                        <img class="bgProduct" src="./img/newproduct bg.png" alt="상품슬라이드 배경">
                        <img class="contentProduct" src="./img/자가비.png" alt="케첩자가비">
                    </div>
                    <div class="productSlide">
                        <img class="bgProduct" src="./img/newproduct bg.png" alt="상품슬라이드 배경">
                        <img class="contentProduct" src="./img/아이비.png" alt="치즈아이비">
                    </div>
                </div>
            </div>
            <div class="eventSlideOuter tapContent">
                <div class="eventSlideInner">
                    <div class="eventSlide">
                        <img class="bgEvent" src="./img/event bg.png" alt="이벤트슬라이드 배경">
                        <img class="contentEvent" src="./img/연양갱.png" alt="연양갱이벤트">
                    </div>
                    <div class="eventSlide">
                        <img class="bgEvent" src="./img/event bg.png" alt="이벤트슬라이드 배경">
                        <img class="contentEvent" src="./img/에이스.png" alt="에이스이벤트">
                    </div>
                    <div class="eventSlide">
                        <img class="bgEvent" src="./img/event bg.png" alt="이벤트슬라이드 배경">
                        <img class="contentEvent" src="./img/새해 이벤트.png" alt="새해이벤트">
                    </div>
                </div>
            </div>
            <div class="mallSlideOuter tapContent">
                <div class="mallSlideInner">
                    <div class="mallSlide">
                        <img class="bgMall" src="./img/haitaimall bg.png" alt="해태몰슬라이드 배경">
                        <img class="contentMall" src="./img/다같이 티타임 세트.png" alt="다같이 티타임세트">
                    </div>
                </div>
            </div>
        </div>
    </div>
</article>

 

JavaScript 설정

Slick 라이브러리를 사용하여 슬라이드를 자동으로 전환되도록 설정합니다

$(".productSlideInner").slick({
    autoplay: true,
    dots: true,
    infinite: true,
    speed: 300,
    arrows: false,
});

$(".eventSlideInner").slick({
    autoplay: true,
    dots: true,
    infinite: true,
    speed: 300,
    arrows: false,
});

$(".mallSlideInner").slick({
    autoplay: true,
    dots: true,
    infinite: true,
    speed: 300,
    arrows: false,
});

$(".slideContainer1").slick({
    autoplay: true,
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    arrows: true,
});

 

2. float를 사용하여 슬라이드 정렬하기

Slick 라이브러리를 이용하여 슬라이드를 구현하는 것도 좋지만, 슬라이드들을 한 줄로 정렬할 때 플로트(float) 속성을 사용하는 방법도 유용합니다. 이 방법은 Flexbox를 사용할 때 발생할 수 있는 몇 가지 오류를 피할 수 있습니다.

HTML
HTML 구조는 이전과 동일합니다

CSS 스타일링

.row {
    display: flex;
    flex-direction: column; /* 슬라이드 제목과 내용을 세로로 배치 */
}

.tapTitle {
    display: flex;
    list-style-type: none; /* 기본 리스트 스타일 제거 */
}

.tapTitle li {
    margin-right: 10px; /* 리스트 항목 간 간격 설정 */
}

.tapContent {
    display: none; /* 기본적으로 슬라이드 내용 숨김 */
}

.tapContent.on {
    display: block; /* 활성화된 슬라이드 내용만 보이도록 설정 */
}

.productSlideOuter, .eventSlideOuter, .mallSlideOuter {
    width: 100%;
    overflow: hidden; /* 슬라이드가 넘칠 경우 숨기도록 설정 */
}

.productSlideInner, .eventSlideInner, .mallSlideInner {
    width: 100%;
}

.productSlide, .eventSlide, .mallSlide {
    float: left; /* 슬라이드를 왼쪽으로 정렬하여 한 줄에 배치 */
    width: 33.3333%; /* 3개의 슬라이드를 한 줄에 배치하기 위해 각 슬라이드의 너비를 100% / 3으로 설정 */
}

 

JavaScript 설정

Slick 라이브러리를 사용하여 슬라이드를 자동으로 전환되도록 설정하는 JavaScript 코드는 동일합니다.

$(".productSlideInner").slick({
    autoplay: true,
    dots: true,
    infinite: true,
    speed: 300,
    arrows: false,
});

$(".eventSlideInner").slick({
    autoplay: true,
    dots: true,
    infinite: true,
    speed: 300,
    arrows: false,
});

$(".mallSlideInner").slick({
    autoplay: true,
    dots: true,
    infinite: true,
    speed: 300,
    arrows: false,
});

 

 

이렇게 하면 슬라이드 세개가 정렬됩니당

사실 가로정렬은 flex를 사용하는게 가장 편하긴한데 flex를 사용하면 오류가 나더라구요

 

- flex를 사용할 때 발생하는 오류
Slick 슬라이더를 사용할 때 플렉스를 적용하면 슬라이드가 올바르게 정렬되지 않거나 슬라이드가 전체 컨테이너에 맞지 않게 배치되는 등의 문제가 발생할 수 있습니다. 이는 Slick이 슬라이드의 너비를 계산하는 방식과 플렉스 레이아웃의 상호작용 때문에 발생합니다. 구체적으로는 다음과 같은 오류가 나타날 수 있습니다:

1. 슬라이드 너비 오류: 플렉스 컨테이너 내부의 슬라이드 아이템이 예상과 다른 너비를 가질 수 있습니다. 플렉스 박스의 flex-grow나 flex-shrink 속성이 Slick의 슬라이드 너비 계산을 방해할 수 있습니다.
   슬라이드 정렬 오류: 플렉스 컨테이너가 슬라이드를 올바르게 정렬하지 못해 슬라이드가 한 줄에 배치되지 않거나, 스크롤 시 슬라이드가 비정상적으로 움직일 수 있습니다.
2. 레이아웃 붕괴: 슬라이드가 제대로 배치되지 않아 레이아웃이 깨지는 현상이 발생할 수 있습니다.
   이런 문제를 피하기 위해 Slick 슬라이더와 함께 사용할 때는 플로트를 사용하는 것이 안전한 방법입니다. 플로트는 단순히 요소를 왼쪽이나 오른쪽으로 배치하기 때문에 Slick의 슬라이드 계산에 영향을 주지 않습니다.