[자격증 / 웹디자인기능사] - 자동 Slide (좌우)

2020년도에 웹디자인 기능사 자격증 취득 준비하면서 준비한 경험으로 글 남깁니다.

 

웹디자인기능사에서는 반응형으로 준비 시키지 않기 때문에 현재 컴퓨터 화면에서

작동이 잘되기만 하면 됩니다.

 

슬라이드 (왼쪽 > 오른쪽)

클릭 버튼없이 왼쪽에서 오른쪽으로 자동으로 넘어가는 슬라이드

 

<section class="slide">
	<div class="slide-wrap">
    
    	<div class="slide-image">
        	<h2>slide-1</h2>
            <img src="https://cdn.pixabay.com/photo/2014/11/16/06/31/chinese-533081_960_720.jpg" alt="slide-1">
         </div>
         
         <div class="slide-image">
        	<h2>slide-2</h2>
            <img src="https://cdn.pixabay.com/photo/2014/11/16/06/51/chinese-533102_960_720.jpg" alt="slide-2">
         </div>
         
         <div class="slide-image">
        	<h2>slide-3</h2>
            <img src="https://cdn.pixabay.com/photo/2017/10/10/22/24/creux-du-van-2839090_960_720.jpg" alt="slide-3">
         </div>
         
      </div>
 <section>
   
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

 

.slide{
width:1000px;
height:250px;
overflow:hidden;
float: left;
}
.slide-wrap{
position:relative;
width:3000px;
height:250px;
}
.slide-image{
position:relative;
width:1000px;
height:250px;
float:left;
}
.slide-image>h2{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
padding:5px 15px;
background-color:rgba(255,255,255,0.8);
color:#333;
z-index:99;
}
.slide img{
  dispaly:block;
  width:100%;
  height:auto;
}

 

 

 

$(function(){
var currentIndex = 0;
var slidePosition;

setInterval(function(){
	if(currentIndex < 2){
    currentIndex++;
  }
  else{
    currentIndex = 0;
  }
    slidePosition =  currentIndex *(-1000)+"px";
    $(".slide-wrap").animate({left:slidePosition},500);  
},3000);
});

 

 

slide-1

slide-2

slide-3