[작업물] 해당 칸에 맞게 움직이는 네비게이션 슬라이드

https://shop.adidas.co.kr/html/adidas/2019/event/vrct/build/index.html

아디다스 공식 온라인 스토어

 

 

html

<div class="slider_wrapper">
    <div class="slider_wrap">
        <div class="title">
            <p>패치에 담긴 그들만의 한 마디</p>
        </div>
        <!-- 슬라이드 아이템 -->
        <ul class="slider">
            <li ><img src="/images/adidas/2019/event/vrct/1.jpg" alt=""></li>
            <li ><img src="/images/adidas/2019/event/vrct/2.jpg" alt=""></li>
            <li ><img src="/images/adidas/2019/event/vrct/3.jpg" alt=""></li>
            <li ><img src="/images/adidas/2019/event/vrct/4.jpg" alt=""></li>
            <li ><img src="/images/adidas/2019/event/vrct/5.jpg" alt=""></li>
            <li ><img src="/images/adidas/2019/event/vrct/6.jpg" alt=""></li>

        </ul>
	<!-- next & prev 버튼 -->
        <div class="btn">
            <a href="#" class="next"><img src="/images/adidas/2019/event/vrct/next.png" alt=""></a>
            <a href="#" class="prev"><img src="/images/adidas/2019/event/vrct/prev.png" alt=""></a>
        </div>
    </div>
    <!-- 각 아이템에 해당하는 네비게이션 -->
    <div class="num_wrap">
        <div class="num">
            <a href="javascript:void(0)" data-index="-1">
                <p>
                    SON NA EUN
                    <em></em>
                </p>
                <span>POTENTIAL </span>
            </a>
            <a href="javascript:void(0)" data-index="0" class="on">
                <p>
                    JAMES HARDEN
                    <em></em>
                </p>
                <span>FAMILY</span>
            </a>
            <!-- 처음보이는 화면 -->
            <a href="javascript:void(0)" data-index="1">
                <p>
                    NING ZETAO
                    <em></em>
                </p>
                <span>BRAVE</span>
            </a>
            <a href="javascript:void(0)" data-index="2">
                <p>
                    METTE TOWLEY
                    <em></em>
                </p>
                <span>AUTHOR</span>
            </a>
            <a href="javascript:void(0)" data-index="3">
                <p>
                    PAULO DYBALA
                    <em></em>
                </p>
                <span>SACRIFICE</span>
            </a>
            <a href="javascript:void(0)" data-index="4">
                <p>
                    DENISE SCHINDLER
                    <em></em>
                </p>
                <span>I’M PERFECT</span>
            </a>

        </div>
    </div>

</div>

 

 

scss

.slider_wrapper {
    width: 100%;
    background: #fff;
    // overflow: hidden;
    .slider_wrap {
        margin: 0 auto;
        position: relative;
        width: 1248px;
        text-align: center;
        .title {
            padding: 64px 0 50px 0;
            text-align: center;
            p {
                text-align: center;
                font: 600 30px 'NotoSansKR';
                color: #000;
            }
            span {
                display: inline-block;
                text-align: center;
                padding-top: 36px;
                font: 19px/25px 'NotoSansKRRegular';
                color: #000;
            }
        }
        a.buy {
            display: inline-block;
            margin-top: 30px;
            padding: 0 100px;
            text-align: center;
            border: 1px solid #000;
            font: 15px/57px 'NotoSansKRRegular';
            color: #000;
        }
        ul.slider {
            position: relative;
            // overflow: hidden;
            // height: 485px;
            li {
                position: relative;
                width: 1248px;
                float: left;
                margin-right: 100px;
                text-align: center;
                .title {
                    padding: 76px 0 54px 0;
                    text-align: center;
                    p {
                        text-transform: uppercase;
                        text-align: center;
                        font: 40px/45px 'adinenuPro-black';
                        color: #000;
                    }
                    span {
                        font: 26px/28px 'NotoSansKRRegular';
                        color: #000;
                    }
                }
            }
        }
        ul.slider:after {
            content: '';
            display: block;
            width: 0;
            height: 0;
            clear: both;
        }
        .btn {
            position: absolute;
            top: 60%;
            width: 100%;
            text-align: center;
            a {
                position: absolute;
                left: 50%;
            }
            .next {
                margin-left: 670px;
            }
            .prev {
                margin-left: -680px;
            }
        }
    }
    .num_wrap {
        position: relative;
        width: 100%;
        margin: 30px 0 20px 0;
        height: 45px;
        .num {
            position: absolute;
            left: 0;
            width: 10000px;
            a {
                position: relative;
                top: 0;
                width: 317px;
                display: inline-block;
                text-align: center;
                vertical-align: middle;
                p {
                    position: relative;
                    display: inline-block;
                    padding: 0 0 2px 0;
                    font: 26px/26px 'adinenuPro-bold';
                    text-align: center;
                    color: #c6c6c6;
                    letter-spacing: 2px;
                    transition: all 0.3s ease-out;
                    em {
                        display: inline-block;
                        width: 74%;
                        height: 2px;
                        background: #000;
                        position: absolute;
                        bottom: 0;
                        left: 50%;
                        margin-left: -37%;
                        opacity: 0;
                        transition: all 0.3s ease-out;
                    }
                }
                span {
                    position: relative;
                    top: 20px;
                    margin: 20px 0 0 0;
                    font: 18px/18px 'adinenuPro-regular';
                    color: #000;
                    letter-spacing: 2px;
                    display: block;
                    text-align: center;
                    opacity: 0;
                    transition: all 0.3s ease-out;
                }
            }
            a.on {
                position: relative;
                font: 22px/30px 'NotoSansKRBold';
                overflow: hidden;
                p {
                    color: #000;
                    em {
                        opacity: 1;
                    }
                }
                span {
                    top: 0;
                    opacity: 1;
                }
            }
        }
    }
}

 

 

javascript

var slider_wrap = $('.slider_wrap');
var slider = $('.slider');
var len = $('.slider li').length;
var li_width = $('.slider li').width();
var li_marginRight = 100;
// 슬라이드가 움직이는 값 (li width + 마진값)
var moveSlider_width = li_width + li_marginRight; 
slider.css({
    'width': li_width * len + li_marginRight * len + 'px'
});
// 슬라이드를 중앙에 위치
slider.css({
    'margin-left': -li_width - li_marginRight + 'px'
});

var index = $('.num a').attr('data-index');
var window_width = $(window).width();
var num_wrap = $('.num_wrap').width();
var numSlider = $('.num');
// 네비게이션 전체 박스를 윈도우 절반을 기준으로 -475px 에 위치
var num_init_left = window_width / 2 - 475;
// 네비게이션이 움직이는 값이자 각각의 네비 width
var numSlider_width = 317;

numSlider.css({
    'left': num_init_left + 'px'
});

$('.num a').click(function() {
	// -1 0 1 2 3...
    var index = $(this).attr('data-index'); 
    $('.num a').removeClass('on');
    $(this).addClass('on');
    $('.slider li').removeClass('on');
    slider.stop().animate({
        'left': -moveSlider_width * index + 'px'
    }, 400);
    // 네비게이션이 갖고 있는 data-index 값을 가져와서 고정으로 움직이는 값에다 곱하기
    numSlider.stop().animate({
        'left': -numSlider_width * index + num_init_left + 'px'
    }, 400);

    return false;
});

// next 함수/prev 함수
var incre = 0;
$('.next').click(function() {
    incre++;
    if (slider.is(':animated') == true) return;
    next();
    if (incre > -1) {
        $('.prev').fadeIn();
    }
    if (incre == len - 2) {
        $('.next').fadeOut();
    }
    //next에 활성된 a 선택 on 부여
    var numOn = $('.num').find('a.on');
    $('.num a').removeClass('on');
    numOn.next().addClass('on');
    var numOn_current = numOn.next();

    return false;


});
$('.prev').click(function() {
    incre--;
    if (slider.is(':animated') == true) return;
    prev();
    if (incre == -1) {
        $('.prev').fadeOut();
    }
    if (incre < len - 2) {
        $('.next').fadeIn();
    }
    //prev에 활성된 a 선택 on 부여
    var numOn = $('.num').find('a.on');
    $('.num a').removeClass('on');
    numOn.prev().addClass('on');
    var numOn_current = numOn.prev();
    return false;

})
$('.num a').eq(0).click(function() {
    $('.prev').fadeOut();
    incre = -1;
});
for (var n = 1; n < 9; n++) {
    $('.num a').eq(n).click(function() {
        $('.next').fadeIn();
        $('.prev').fadeIn();
        var aIndex = $(this).attr('data-index');
        incre = aIndex;
    });
};

$('.num a').eq(len - 1).click(function() {
    $('.next').fadeOut();
    incre = len - 2;
});

function next() {
    slider.stop().animate({
        'left': -moveSlider_width * incre
    }, 500);
    numSlider.stop().animate({
        'left': -numSlider_width * incre + num_init_left
    }, 500);
}

function prev() {
    slider.stop().animate({
        'left': -moveSlider_width * incre
    }, 500);
    numSlider.stop().animate({
        'left': -numSlider_width * incre + num_init_left
    }, 500);
}

// resizing :: 화면창을 늘리고 줄여도 네비 위치 고정되게
$(window).resize(function(){
  var window_width = $( window ).width();
  var num_wrap = $('.num_wrap').width();
  num_init_left = window_width/2 - 475;
  numSlider.css({ 'left' : -numSlider_width*incre + num_init_left });
});