팀프로젝트 이미지 슬라이드.

우선 기능구현이 목적이기때문에 css부분은 아무것도 건들지 않았다.

const showMovies = (data) => {

  const clonedMovies = [...data];

  clonedMovies.slice(0, 6).forEach((movie) => {

    const { poster_path, title, vote_average } = movie;

    const slideItem = document.createElement("div");

    slideItem.classList.add("slide-item");

    const image = new Image();

    image.src = `${IMG_URL + poster_path}`;

    slideItem.appendChild(image);

    const movieInfo = document.createElement("div");

    movieInfo.classList.add("movie-info");

    movieInfo.innerHTML = `<h3>${title}</h3><span class="green">${vote_average}</span>`;

    slideItem.appendChild(movieInfo);

    sliderContainer.appendChild(slideItem);

  });

  slideItems = document.querySelectorAll(".slide-item");

  showSlide();

};

우선 이미지 슬라이드 부분을 가져오는 것 부터 시작
clonedMoveis에 data값을 지정했고
그리고 그 데이터 값에서 slice메서드를 사용해서 이미지를 6개만 들고오는 식으로 짰다.
우선 지난 과제때 한 것 처럼 
div를 생성하고 그 div에 class값을 주는 것부터 시작해서
image 값을 api에서 불러오고 appendChild()를 통해 image를 생성되는 slideitem에 붙였다

그리고 우측에 이미지를 로드시키게끔 css에서 변경을 하였고 

좌측에는 영화 제목과 평점이 필요하기때문에 윗 작업을 반복했다.

const showSlide = () => {

  const transformValue = -currentSlide * 100 + "%";

  sliderContainer.style.transform = `translateX(${transformValue})`;

};

const prevSlide = () => {

  currentSlide = currentSlide > 0 ? currentSlide - 1 : slideItems.length - 1;

  showSlide();

};

const nextSlide = () => {

  currentSlide = currentSlide < slideItems.length - 1 ? currentSlide + 1 : 0;

  showSlide();

};

const prevBtn = document.getElementById("prevBtn");

const nextBtn = document.getElementById("nextBtn");

prevBtn.addEventListener("click", prevSlide);

nextBtn.addEventListener("click", nextSlide);

슬라이드 버튼 부분인데 이 부분이 너무 어려웠다.

우선 showSlide 부분은 컨테이너를 가로로 이동시키는 함수인 showSlide부분을 정의하고있다.
이함수는 currentSlide를 기반으로 슬라이더컨테이너의 transform속성을 변경한다.
-currentSlide 는 현재 슬라이드의 인덱스와 슬라이드 하나의 너비가 100%로 가정되어 계산이 되는데
예를들어 현재 슬라이드 인덱스가 1이면 transformValue는 -100퍼가 되어 슬라이더 컨테이너가 왼쪽으로 한슬라이드 너비만큼 이동하게된다.

translateX함수는 translate 뒤에 X가오면 x축으로 Y가오면 y축으로의 이동을 뜻한다.
그리고 바로밑 translateX 를 통해 x축으로의 이동하도록 설정했다.

그럼 나머지 prevSlide와 nextSlide는 간단한데 위에서 인덱스가 1이면 transformValue는 -100퍼 즉 한 슬라이드를 이동한것이고 삼항연산자를 사용해서 현재 인덱스가 0보다 크면 -1한값 그게 아니라면 -1값을 줬다. 
이렇게하면 이전 슬라이드로 이동을 하는데 첫번째 슬라이드에서 이전 버튼을 누르면 마지막 슬라이드로 돌아간다.
그리고 버튼을 누르면 이 함수가 실행되게끔 하면 된다.