slick을 사용하여 콘텐츠와 텍스트가 변경되는 슬라이드 만들기

슬라이드가 넘어오면서 텍스트 등 콘텐츠들이 같이 넘어오는 게 아니라

텍스트 영역은 움직이지 않으면서 그 안의 텍스트만 슬라에드에 맞게 변경되는 슬라이드를 만들어보려고 했는데

생각보다 복잡했다 ㅠ.ㅠ

하지만 어쨌든 완성해냄

 

 

<div class="slide_area">
    <div class="slide_for">
        <div class="text_area"><em>가이아</em></div>
        <div class="text_area"><em>네메시스</em></div>
        <div class="text_area"><em>니케</em></div>
        <div class="text_area"><em>디오니소스</em></div>
        <div class="text_area"><em>레테</em></div>
        <div class="text_area"><em>메티스</em></div>
        <div class="text_area"><em>브로미우스</em></div>
    </div>
    <div class="slide_nav">
        <div class="img_area">
            <div class="box" style="background: rgb(255, 227, 227);">

            </div>
        </div>
        <div class="img_area">
            <div class="box" style="background: rgb(240, 255, 227);">

            </div>
        </div>
        <div class="img_area">
            <div class="box" style="background: rgb(245, 227, 255);">
            </div>
        </div>
        <div class="img_area">
            <div class="box" style="background: rgb(255, 254, 227);">

            </div>
        </div>
        <div class="img_area">
            <div class="box" style="background: rgb(227, 239, 255);">

            </div>
        </div>
        <div class="img_area">
            <div class="box" style="background: rgb(255, 241, 227);">

            </div>
        </div>
        <div class="img_area">
            <div class="box" style="background: rgb(233, 227, 255);">

            </div>
        </div>
    </div>
</div>

기본적인 레이아웃 구성은 이렇다

텍스트들만 따로 위에 모아둬야 슬라이드와 함께 움직이지 않고 독자적으로 움직인다

 

 

/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

기본적인 slick.css 내용

여기서 필요한 대로 커스텀하면 된다

 

 

.slick-prev {
    position: absolute;
    width: 25px;
    height: 25px;
    left: 15px;
    top: 149px;
    border: none;
    border-top: 3px solid #666;
    border-right: 3px solid #666;
    transform: rotate(225deg);
    background: none;
}

.slick-next {
    position: absolute;
    width: 25px;
    height: 25px;
    right: 15px;
    top: 149px;
    border: none;
    border-top: 3px solid #666;
    border-right: 3px solid #666;
    transform: rotate(45deg);
    background: none;
}

화살표 버튼으로 슬라이드를 제어하는 기능도 사용할 거라서

이렇게 만들어주고

 

 

.slick-dots {
    position: absolute;
    right: 20px;
    bottom: 16px;
    margin: 0;
    z-index: 99;
}

.slick-dots::after {
    display: block;
    content: '';
    clear: both;
}

.slick-dots li {
    float: left;
    list-style: none;
}

.slick-dots li + li {
    margin-left: 4px;
}

.slick-dots li button {
    width: 5px;
    height: 5px;
    padding: 0;
    background-color: rgba(0, 0, 0, .5);
    border-radius: 50%;
    font-size: 0;
    border: none;
}

.slick-dots .slick-active button {
    background-color: #000;
}

현재 활성화된 슬라이드를 나타내 주고,

슬라이드 제어의 기능도 있는 도트도 사용할 거라서

이렇게 커스텀해줬다

 

 

$('.slide_for').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: '.slide_nav',
    autoplay : true,
    autoplaySpeed : 2500
});
    $('.slide_nav').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    asNavFor: '.slide_for',
    dots: true,
    centerMode: true,
    focusOnSelect: true,
    variableWidth : true,
    autoplay : true,
    autoplaySpeed : 2500
});

스크립트는 이렇게 원하는 대로 slick을 넣어주면 된다

직관적인 이름이라 굳이 설명서를 하나하나 찾아보지 않아도 사용하기 편하다

 

<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

참고로 slick을 사용하려면 꼭 이 코드를 넣어줘야 한다!

 

 

 

이렇게 잘 만들어서 넣어주면

See the Pen Untitled by Suu978 (@suu978) on CodePen.

 

짜잔

멋지게 동작하는 슬라이드를 뚝딱 만들어낼 수 있다

 

 

정말 슬라이드는 만드는 과정은 고통스럽지만 제대로 작동하면 만족감이 너무 큰 듯 :)