자바스크립트로 슬라이드 구현하기

슬라이드를 만들기전에

<슬라이드 잡아주는 태그>  >position : relative, overflow: hidden (넘어가는것 지우기)

<슬라이드 ul태그> > absolute, float: left, left:0, top:0

-슬라이드 li들- 

</ul>

<버튼> > 혹시 버튼이 자리잡기 힘들면 밖으로 빼거나 div로 한번 더 묶기 > position : absolute , flex,

</잡아주는 태그>

 

높이, 너비는 거의 vh,vw로 줌

 

 

-상황에 맞게 카드 배열 잘 맞춰야함

  만들때부터 딱 맞게 만들기

- 카드 넘어갈때 규격 정확히 정하기(js에서)

     >  안맞으면 뒤로 갈수록 튀어나옴

 

 

나머지는 상황따라 맞추기

 

 

 

1개 만들때는 (엄청 간단한 ver)

1.먼저 ul슬라이드 부분 태그를 document.querySelector을 이용해서 변수 선언

2. ul속 li들을  document.querySelectorAll로 잡아주기

<둘다 지정만 ul과 li잡기만 하면된다. 다른 APi로 할거면 그걸로>

 

 

3. 슬라이드 인덱스 세는 변수 선언 = 0

 

4. 슬라이드 인덱스 갯수 파악

 >>> 미리 나와있으면 나와있는대로

 >>  없으면 li잡은 변수에 .length

 

5. 버튼도 각각 번수 선언해서 잡아주기 document.querySelector

 

6. 함수선언문 이용

   함수 = (매개변수n) => {

      ////이건 카드가 1장 넘어가면 왼쪽으로 움직이니 -로 해야함

      ul잡은거.style.left = -매개변수n * (카드 1장 단위);

      슬라이드 인덱스 세는 변수 선언 = 매개변수n

} 

 

7. 다음버튼변수. addEventListener("click", () => {

   슬라이드 함수(슬라이드 인덱스변수 + 1)

}

 

   이전버튼변수. addEventListener("click", () => {

   슬라이드 함수(슬라이드 인덱스변수  - 1)

}

 

 

 

 

 

 

 

슬라이드 끝일때 버튼 비활성화는 밑에 참고

 

 

 

 

 

 

 

 

 

 

 

 

 

 

하나의 함수로 다량의 슬라이드에 적용하기 

 

 

 

 

 

 

----만든 코드보며 되새기기---

js

export { setupSlideNavigation };

const setupSlideNavigation = ({ slidesSelector, prevBtnSelector, nextBtnSelector }) => {
  const slides = document.querySelector(slidesSelector);
  const prevBtn = document.querySelector(prevBtnSelector);
  const nextBtn = document.querySelector(nextBtnSelector);
  let currentIdx = 0;

  const moveSlides = (num) => {
    slides.style.left = -num * 14.8 + "vw";
    // 슬라이드 속도 설정
    slides.style.transitionDuration = "0.6s";
    // 슬라이드 애니메이션 타이밍 함수 설정
    slides.style.transitionTimingFunction = "ease-in-out";

    currentIdx = num;
    prevBtn.disabled = num === 0;
    nextBtn.disabled = num === slides.children.length - 6;
  };

  nextBtn.addEventListener("click", () => {
    moveSlides(currentIdx + 1);
  });

  prevBtn.addEventListener("click", () => {
    moveSlides(currentIdx - 1);
  });
};

// 각 슬라이드에 대한 정보를 사용하여 슬라이드 네비게이션 설정
const slideData = [
  {
    slidesSelector: "#now-playing",
    prevBtnSelector: "#prevNow",
    nextBtnSelector: "#nextNow"
  },
  {
    slidesSelector: "#popular",
    prevBtnSelector: "#prevPopular",
    nextBtnSelector: "#nextPopular"
  },
  {
    slidesSelector: "#top-rated",
    prevBtnSelector: "#prevTop",
    nextBtnSelector: "#nextTop"
  },
  {
    slidesSelector: "#upcoming",
    prevBtnSelector: "#prevUp",
    nextBtnSelector: "#nextUp"
  }
];

slideData.forEach((data) => {
  setupSlideNavigation(data);
});

 

 

 

1개 만들때와 비슷

 

 

 

1개만드는 방법에 직접적으로 잡을 태그 셀렉하지 말고

매개변수로 받게 만들면된다.

 

 

prevBtn.disabled = num === 0;
    nextBtn.disabled = num === slides.children.length - 6;

이거는 이전버튼이 0일경우 비활성

 

_ 만든 카드수가 6개일경우 다음버튼은 -6    

 

 

 

 

직접적으로 함수를 호출하면

배열에 인덱스가 몇개있는지 모르기 때문에

각 슬라이스 데이터를 객체로 잡고

 

그걸 한번 데이터로 뽑아줘야한다.

 

 

 

 

위처럼 만들경우

마지막 버튼은 비활성이 잘되지만

이전버튼은 다음을 한번 누르고 이전을 눌러야 비활성화

   + 처음에 이전누르면 빈 화면이 나왔다.

      >> 이거때문에 개별로 처음에 이전버튼을 비활성화 시켜야하는데

 

 

제일 쉽게 해결하는 방법은 html 이전버튼코드에 disabled = ''ture 추가

 

disabled="true"

 

html

    <main>
      <h2>Now Playing</h2>
      <div class="movie-container">
        <ul class="flex-container" id="now-playing"></ul>
        <div class="arrow">
          <button class="prev" id="prevNow" disabled="true">prev</button>
          <button class="next" id="nextNow">next</button>
        </div>
      </div>
      <h2>Popular</h2>
      <div class="movie-container">
        <ul class="flex-container" id="popular"></ul>
        <div class="arrow">
          <button class="prev" id="prevPopular" disabled="true">prev</button>
          <button class="next" id="nextPopular">next</button>
        </div>
      </div>
      <h2>Top Rated</h2>
      <div class="movie-container">
        <ul class="flex-container" id="top-rated"></ul>
        <div class="arrow">
          <button class="prev" id="prevTop" disabled="true">prev</button>
          <button class="next" id="nextTop">next</button>
        </div>
      </div>
      <h2>Upcoming</h2>
      <div class="movie-container">
        <ul class="flex-container" id="upcoming"></ul>
        <div class="arrow">
          <button class="prev" id="prevUp" disabled="true">prev</button>
          <button class="next" id="nextUp">next</button>
        </div>
      </div>
    </main>

 

 

 

css

.movie-container {
    position: relative;
    width: 88vw;
    height: 42vh;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

/* flex 사용 */
.flex-container {
    display: flex;
    align-items: flex-start;
    position: absolute;
    left: 0;
    top: 0;
    width: 86vw;
    padding: 0;
    float: left;
}
/* 넓이 지정을 통해 한줄당 나열될 카드 수 지정 */
.card {
    width: 18vw;
    height: 40vh;
    /* 카드수 수정은 마진으로 */
    margin: 0 0.6vw;
    text-align: center;
    background-color: #938866;
    border-radius: 2rem;
    list-style-type: none;
}
.arrow {
    position: absolute;
    display: flex;
    width: 100%;
    bottom: 45%;
    justify-content: space-between;
}
.prev {
    float: left;
}
.next {
    float: right;
}

.image-box img {
    width: 8vw;
    height: 27vh;
    border-radius: 2rem;
    margin-top: 1rem;
}

 

 

 

네, slideData.forEach((data) => { setupSlideNavigation(data); }); 코드를 실행하면 각 슬라이드에 대한 정보가 담긴 객체를 이용하여 setupSlideNavigation 함수가 호출됩니다.

이 함수 내에서는 각 슬라이드의 요소를 선택하고 해당 슬라이드에 대한 네비게이션을 설정합니다. 그리고 슬라이드의 자식 요소의 수를 이용하여 각 슬라이드에 몇 개의 요소가 있는지 알 수 있습니다.

따라서 setupSlideNavigation 함수를 호출하고 나면 각 슬라이드의 요소 수를 기준으로 네비게이션을 설정하게 됩니다.