공부/Web

[Html/CSS/Javascript] 이미지 슬라이드

래울 2021. 9. 21. 14:25

영상 : https://www.youtube.com/watch?v=N0FwZospisc

심심해서 웹 사이트를 만들다가 하나쯤 넣어볼까 해서 위 영상을 참고해서 만들었다.

ㅇㄹ슬라이드

 

- 코드

 

HTML

<!doctype html>
<html lang="ko" dir="ltr">
    <head>
        <link rel ="stylesheet" href="slide_style.css">
    </head>    <div class="slide_box">
                <div class="slider">
                    <div class="slides">
                        <input type="radio" name="radio-btn" id="radio1">
                        <input type="radio" name="radio-btn" id="radio2">
                        <input type="radio" name="radio-btn" id="radio3">
                        <input type="radio" name="radio-btn" id="radio4">
                        
                        <div class="slide first">
                            <img src="1.jpg" alt="">
                        </div>
                        
                        <div class="slide">
                            <img src="2.jpg" alt="">
                        </div>
                        
                        <div class="slide">
                            <img src="33.jpg" alt="">
                        </div>
                        
                        <div class="slide">      
                            <img src="4.jpg" alt="">
                        </div>
          
                        <div class="navigation-auto">
                            <div class="auto-btn1"></div>
                            <div class="auto-btn2"></div>
                            <div class="auto-btn3"></div>
                            <div class="auto-btn4"></div>
                        </div>
                    </div>
          
                    <div class="navigation-manual">
                        <label for="radio1" class="manual-btn"></label>
                        <label for="radio2" class="manual-btn"></label>
                        <label for="radio3" class="manual-btn"></label>
                        <label for="radio4" class="manual-btn"></label>
                    </div>
                </div>
    </div>    <!--end-->
<script src="/slide.js"></script>
</html>

 

 

CSS

body{
    margin : 0;
    padding : 0;
    height : 500px;
    display : flex;
    justify-content : center;
    align-items : center;
    background : white;
}

.slider{
    width: 800px;
    height: 500px;
    border-radius : 10px;
    overflow : hidden;
}

.slides{
    width : 500%;
    height : 500px;
    display : flex;
}

.slides input{
    display : none;
    
}

.slide{
    width : 20%;
    transition: 2s;
    
}

.slide img{
    width : 800px;
    height : 500px;
}

/*adsadasdasdsadsadas  */
.navigation-manual{
    position : absolute;
    width : 800px;
    margin-top: -40px;
    display : flex;
    justify-content : center;
}

.manual-btn{
    border: 4px solid red;
    padding : 5px;
    border-radius : 10px;
    cursor : pointer;
    transition : 1s;
}

.manual-btn:not(:last-child){
    margin-right: 40px;
}

.manual-btn:hover{
    background: blueviolet;
}

#radio1:checked ~ .first{
    margin-left: 0;
}
#radio2:checked ~ .first{
    margin-left: -20%;
}
#radio3:checked ~ .first{
    margin-left: -40%;
}
#radio4:checked ~ .first{
    margin-left: -60%;
}

.navigation-auto{
    position : absolute;
    display : flex;
    width : 800px;
    justify-content : center;
    margin-top : 460px;
}

.navigation-auto div{
    border : 4px solid red;
    padding : 5px;
    border-radius : 10px;
    transition : 1s;
}


.navigation-auto div:not(:last-child){
    margin-right: 40px;
}

#radio1:checked ~ .navigation-auto .auto-btn1{
    background: #40d3dc;
}
#radio2:checked ~ .navigation-auto .auto-btn2{
    background: #40d3dc;
}
#radio3:checked ~ .navigation-auto .auto-btn3{
    background: #40d3dc;
}
#radio4:checked ~ .navigation-auto .auto-btn4{
    background: #40d3dc;
}

 

Javascript

var counter = 1;
    setInterval(function(){
    document.getElementById('radio'+counter).checked = true;
    counter++;
    if(counter > 4)
        counter = 1;
}, 2000)