[jQuery] 인디케이터를 사용한 이미지 슬라이드


인디케이터를 사용한 이미지 슬라이드 만들기



See the Pen 이미지 슬라이드 - 인디케이터 by Jinsol (@losuif) on CodePen.



HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Indicator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div id="visual">
        <div id="pic">            
                <div><a href="#">
                    <img src="https://images.unsplash.com/photo-1634214564164-42b834f37e41?ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDQ0fGhtZW52UWhVbXhNfHxlbnwwfHx8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="1">
                </a></div>
                <div><a href="#">
                    <img src="https://images.unsplash.com/photo-1634119418593-dbb72fcedc3e?ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDUxfGhtZW52UWhVbXhNfHxlbnwwfHx8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="2">
                </a></div>
                <div><a href="#">
                    <img src="https://images.unsplash.com/photo-1633895138226-796e9bb242d8?ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDg3fGhtZW52UWhVbXhNfHxlbnwwfHx8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="3">
                </a></div>
                <div><a href="#">
                    <img src="https://images.unsplash.com/photo-1626744287208-2ceda957181d?ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDEzM3xobWVudlFoVW14TXx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="4">
                </a></div>            
        </div>
        <!-- div#pic 이미지 -->

        <div id="control">
            <a href="#">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
        </div>
        <!-- div#control 인디케이터 -->
    </div>
    <!-- div#visual -->
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="script.js"></script>
</body>
</html>



CSS

/* RESET -> */
* {
    margin: 0;
    padding: 0;
}   

li {
    list-style: none;
}

a {
    font-family: "돋움";
    font-size: 12px;
    color: #000;
    text-decoration: none;
}
/* <- RESET */

#visual {
    width: 1000px;
    margin: 20px auto;
    position: relative;
    /* position: relative -> 하위 요소 중에 pos:absolute, fixed, .. 존재 */
}

#pic {
    height: 563px;
    overflow: hidden;           
    position: relative;
    box-shadow: 1px 5px 10px 2px #666;
}

#pic > div {
    position: absolute;
    left: 0;
    top: 0;
    display: none;
}

#pic > div > a > img {
  width: 1000px;
}

#control {
    position: absolute;    
    width: 100%;
    left: 0;
    bottom: 30px;          
    text-align: center;            
}

#control a {
    display: inline-block;
    width: 26px;
    height: 26px;
    background: #000;            
    color: #fff;
    font-weight: bold;          
    line-height: 26px;
    font-size: 0.8em;
    border-radius: 50%;
    margin: 0 2px
}

#control a.on {
    color: #000;
    background: #fff;
}



JavaScript

$(function(){
    
        $("#control > a:first").addClass("on");
        $("#pic > div:first").show();

        $("#control > a").click(function() {
        event.preventDefault();
        // a 요소 클릭 시 페이지 이동 금지 (화면이 위로 이동하지 않는 효과)

        const idx = $(this).index(); 
        // 0, 1, 2, 3 > 배열로 처리하기 위함                 
        $(this).addClass("on").siblings().removeClass("on");
        
        $("#pic > div").filter(":visible").stop(true).fadeOut(350);
        $("#pic > div").eq(idx).stop(true).fadeIn(350);
    
    });

});

Categories:

Javascript   jQuery