CSS, 제이쿼리 이용한 이미지 슬라이드

# 이미지 슬라이드 효과

## 결과물

See the Pen 이미지 슬라이드 by dlagusgh1 (@dlagusgh1) on CodePen.

## html

<div class="slide-box con flex">
  <div class="slide-image flex-ai-c">
    <img src="https://cdn.pixabay.com/photo/2020/05/15/11/49/pet-5173354_960_720.jpg" id=mainImage alt="slide" />
  </div>
</div>

## CSS

.slide-box {
  width: 100%;
  height: 500px;
  overflow: hidden;
  margin-top: 30px;
}

.slide-box > slide-image > img {
  max-width: 100%;
  width: 100%;
  height: auto;
  display: inline-block;
}

## 제이쿼리

var myImage = document.getElementById("mainImage");
var imageArray = [
  "https://cdn.pixabay.com/photo/2020/05/15/11/49/pet-5173354_960_720.jpg",
  "https://cdn.pixabay.com/photo/2020/06/06/09/36/armored-car-5265887_960_720.jpg",
  "https://cdn.pixabay.com/photo/2020/05/24/16/14/switzerland-5214914_960_720.jpg"
];
var imageIndex = 0;

function changeImage() {
  myImage.setAttribute("src", imageArray[imageIndex]);
  imageIndex++;
  if (imageIndex >= imageArray.length) {
    imageIndex = 0;
  }
}
setInterval(changeImage, 2000);

## 출처

https://pixabay.com/ko/