CSS + Jquery 이미지 페이드인 슬라이드 만들기

자동 페이드인 슬라이드

HTML

<div id="one" class="banner">
      <div class="slide">
         <div>
           <img src="./assets/images/geeks.jpg" alt="">
         </div>
         <div>
           <img src="./assets/images/keyboard.jpg" alt="">
         </div>
         <div>
           <img src="./assets/images/business.jpg" alt="">
         </div>
      </div>
      <div class="overlay">
        <h1>Starters</h1>
        <h3>Web developers</h3>
      </div>
    </div>

CSS

.slide{
  height:730px;
  overflow:hidden;
  position: relative;
  top:0;
  left:0;
}
.slide > div{
  position: absolute;
  height:100%;
}

 

Jquery

$(".slide > div:gt(0)").hide();

setInterval(function() {
  $('.slide > div:first')
    .fadeOut(2000)
    .next()
    .fadeIn(2000)
    .end()
    .appendTo('.slide');
},  6000);

 

- 현재 웹사이트 제작 외주 일에 사용할 판매 사이트에 적용하면서 만든 코드

- setInteval 만들 땐, 뭔지 몰랐는데.. react 강의 듣다보니 지금은 왜 저게 저렇게 되는지 알겠다ㅎㅎㅎ