이미지 슬라이드

1. 페이드인아웃

html

<div class="slide">
            <div class="slideList">
                <div class="slideImg"><h2>이미지1</h2><a href="#"><img src="images/slide1.jpg" alt="이미지1"></a></div>
                
                <div class="slideImg"><h2>이미지2</h2><a href="#"><img src="images/slide2.jpg" alt="이미지2"></a></div>
                
                <div class="slideImg"><h2>이미지3</h2><a href="#"><img src="images/slide3.jpg" alt="이미지3"></a></div>
            </div>
        </div>

css

.slide{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.slideList{
    width: 3600px; /*좌 우 유형 시 추가 */
    position: relative;
    height: 300px;
}
.slideImg{
    float:left; /*좌 우 유형 시 추가 */
    width: 1200px; 
    height: 300px; 
    position: relative;
}
.slideImg h2{
    position: absolute; /*slideImg가 기준 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255,255,255,0.4);
    color: #000;
    border-radius: 25px;
    padding: 10px;
}
.slideImg img{
    width:1200px;
    height: 300px;
}

javascript

    var currentIndex = 0;
    
    setInterval(function(){
        if(currentIndex < 2) {
            currentIndex ++;
        } else {
            currentIndex = 0;
        } 
        
        $(".slideImg").eq(currentIndex).siblings().fadeOut();
        $(".slideImg").eq(currentIndex).fadeIn();
        
    },3000);

2. 좌우

html

<!-- 이미지 슬라이드 시작 -->
<div class="slide">
    <div class="slideList">
        <div class="slideImg"><img src="images/slide1.jpg" alt="슬라이드1"></div>
        <div class="slideImg"><img src="images/slide2.jpg" alt="슬라이드2"></div>
        <div class="slideImg"><img src="images/slide3.jpg" alt="슬라이드3"></div>
    </div>
</div>
<!-- 이미지 슬라이드 끝 -->

css

.slide{
    height: 350px;
    width: 800px;
    position: relative;
    overflow: hidden;
}
.slideList{
    width: 2400px;
    height: 350px;
    position: absolute;
    top: 0;
    left: 0;
}
.slideImg{
    float: left;
    width: 800px;
    height: 350px;
}
.slideImg img{
    width: 100%;
    height: 100%;
}

javascript

var currentIndex = 0;
var slidePosition;
setInterval(function(){
    if (currentIndex < 2) {
        currentIndex ++;
    } else {
        currentIndex = 0;
    }
        slidePosition = currentIndex * (-800) +"px";
        $(".slideList").animate({left:slidePosition},400);
},3000);

3. 상하

html

<div class="slide">
            <div class="slideList">
                <div class="slideImg"><h2>이미지1</h2><a href="#"><img src="images/slide1.jpg" alt="이미지1"></a></div>
                <div class="slideImg"><h2>이미지2</h2><a href="#"><img src="images/slide2.jpg" alt="이미지2"></a></div>
                <div class="slideImg"><h2>이미지3</h2><a href="#"><img src="images/slide3.jpg" alt="이미지3"></a></div>
            </div>
        </div>

css

.slide{
    width: 1200px;
    height: 300px;
    margin: 0 auto;
    overflow: hidden;
    position:relative;
}
.slideList{
    width: 100%;
    position:absolute;
    top:0;
    left:0;
    height: 100%;
}
.slideImg{
    width: 1200px; 
    height: 300px; 
    position: relative;
}
.slideImg h2{
    position: absolute; /*slideImg가 기준 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255,255,255,0.4);
    color: #000;
    border-radius: 25px;
    padding: 10px;
}
.slideImg img{
    width:1200px;
    height:300px;
}

javascript

    var currentIndex = 0;
    var slidePosition;
    
    setInterval(function(){
        if(currentIndex < 2) {
            currentIndex ++;
        } else {
            currentIndex = 0;
        } slidePosition= currentIndex * (-300) +"px";
        
        $(".slideList").animate({top: slidePosition},400);
    },3000);