[웹디자인기능사]슬라이드 구현하기

슬라이드 유형은 다음과 같다

• 좌/우 슬라이드
• 상/하 슬라이드
• fadeIn/fadeOut슬라이드

좌/우,상/하 슬라이드의 기본

좌/우, 상/하 슬라이드는 다음과 같이 구성된다.

• 실제 슬라이드가 보이는 영역
• 슬라이드를 나열할 수 있는 띠지
• 슬라이드

띠지가 좌/우, 상/하로 움직이면서 슬라이드 되는 효과를 나타내게 된다.

fadeIn/fadeOut 슬라이드의 기본

fadeIn/fadeOut 슬라이드는 position: absolute를 이용하여 슬라이드를 공중에 띄워 하나로 겹치게 한다. 이후 보여줄 슬라이드에 fadeIn()을 주고 나머지에는 fadeOut()을 주어 슬라이드 효과를 나타낸다.

---

좌/우 슬라이드

상/하 슬라이드

좌/우, 상/하 슬라이드의 기본 원리는 동일하다! 슬라이드 띠지의 방향과 animate 방향만 바꿔주면 원하는 슬라이드를 만들 수 있다.
결과 화면을 보면 슬라이드 1번과 3번은 마지막 슬라이드를 만나면 첫번째 슬라이드로 돌아가는 모션이 보이고, 2번과 4번은 자연스럽게 첫번째 슬라이드가 나오는것을 확인할 수 있다.

첫번째로 돌아가는 슬라이드

let slideCount1 = 0; //현재 슬라이드 순서를 카운트하는 변수
setInterval(slideLeft1, 3000); //3초 간격으로 slideLeft1 함수 실행

function slideLeft1() {
  slideCount1++; // 함수가 실행될때마다 1씩 증가
  if (slideCount1 == 3) {
    slideCount1 = 0; // 변수값이 3이 되면 0으로 초기화(슬라이드 첫번째로 이동)
  }
  /* 0.5초의 속도로 top값 이동 */
  $(".slide-inner01").animate({ top: slideCount1 * -250 + "px" }, 500);
}

자연스럽게 이어지는 슬라이드

let slideCount2 = 0;
setInterval(slideLeft2, 3000);
/* 첫번째 슬라이드를 복제하여 slide-inner의 마지막에 추가함
   슬라이드1(0px) -> 슬라이드2(-250px) -> 슬라이드3(-500px) -> 슬라이드1(-750px) 순서가 됨*/
$(".slide-inner02 .slide").eq(0).clone().appendTo(".slide-inner02");

function slideLeft2() {
  slideCount2++;
   /* slideCount가 3이되면 top이 -750px으로 이동한 후,
   if문을 만나면서 slideCount가 0으로 초기화됨 */
  $(".slide-inner02").animate({ top: slideCount2 * -250 + "px" }, 500);
  if (slideCount2 == 3) {
    slideCount2 = 0;
    /* 0초의 속도로 top을 0px으로 이동
       맨 마지막 요소와 맨 첫번째 요소가 자연스럽게 이어지게 됨 */
    setTimeout(function () {
      $(".slide-inner02").animate({ top: "0" }, 0);
    }, 500);
  }
}

---

fadeIn/fadeOut 슬라이드