아래 사진을 보면 첫번째사진에서 두번째사진으로 바뀔때

두번째사진이 아래로 비춰지면서 밀어냈다가 바뀝니다ㅜ

뭐때문인지 알수가 없네요 ㅠ

- 정상화면

- 장면이 바뀔때 모습

캡처한것이라 상단메뉴는 보이지만 그건 무시하셔도 됩니다.

<section id="main_slide">
 <div class="slide">
  <ul class="slide_ul">
   <li><a href="#"><img src="<? echo G5_THEME_IMG_URL; ?>/bgimg3.jpg" alt="dane"></a></li>
   <li><a href="#"><img src="<? echo G5_THEME_IMG_URL; ?>/bgimg4.jpg" alt="dane"></a></li>
  </ul>

  </div>
</div>

이미지가 있는 부분이구요~

js 부분입니다.

// JavaScript Document

$(document).ready(function() {
 
 var current=0;
 var slide_length = $('.slide_ul>li').length;//이미지의 갯수를 변수로
 var btn_ul = '<ul class="slide_btn"></ul>';//버튼 LIST 작성할 UL
 

 $('.slide_ul>li').hide();//이미지 안보이게
 $('.slide_ul>li').first().show();//이미지 하나만 보이게
 
 
 $(btn_ul).prependTo($('.slide'))//slide 클래스위에 생성
 for (var i = 0 ; i < slide_length; i++){//동그라미 버튼 생성 이미지 li 개수 만큼
  var child = '<li><a href="#none">'+i+'</a></li>';
  $(child).appendTo($('.slide_btn'));
 }
 
 $('.slide_btn > li > a').first().addClass('active'); 
 $('.slide_btn > li > a').on('click' , slide_stop);
 
//자동 슬라이드 함수
function autoplay(){
 
 if(current == slide_length-1){
 current = 0;
}else{
 current++;
}
 $('.slide_ul>li').stop().fadeOut(900);
 $('.slide_ul>li').eq(current).stop().fadeIn(700);
 $('.slide_btn > li > a').removeClass('active'); 
 $('.slide_btn > li > a').eq(current).addClass('active'); 
}
setInterval(autoplay,5000);//반복

//버튼 클릭시 호출되는 함수
function slide_stop(){
  var fade_idx = $(this).parent().index();
  current = $(this).parent().index();//클릭한 버튼의 Index 를 받아서 그 다음 이미지부터 슬라이드 재생.
  if($('.slide_ul > li:animated').length >= 1) return false; //버튼 반복 클릭시 딜레이 방지
  $('.slide_ul > li').fadeOut(400);
  $('.slide_ul > li').eq(fade_idx).fadeIn(400);
  $('.slide_btn > li > a').removeClass('active'); 
  $(this).addClass('active');
  
 } 
});

이건 css부분입니다.

/*메인슬라이드 이미지*/

#main_slide ul, li{
 margin:0;
 padding:0;
 list-style:none; 

  
}

#main_slide >ul> li{
  overflow: hidden;
}

#main_slide {
 margin:0 auto;
 text-align:center;
 position:relative;
 top:0;
 
}

.main_txt {
 position:absolute;
 z-index: 999;
 width:100%; 
}

.main_txt .col-sm-12 {
 width:100%;
 text-align:center;
 margin-top: 220px;
 color:#FFF;
}

@media (min-width:992px) {
#main_slide .slide img {
 width:100%;
 height: 100vh;

 
}
.main_txt .col-sm-12 h1 {
 font-size: 70px;
}

}
/*모바일*/
@media (max-width:991px) {
 #main_slide .slide {
      height: 490px; 
     overflow:hidden;
  position:relative;
}
#main_slide .slide img {
 width:1152px;
 height:450px;
 margin-left:-30%;
 margin-top:90px;
 overflow:hidden;
  
}
.main_txt .col-sm-12 {
 display:none;
}

 
}