슬라이드

1. 기본 슬라이드
- 1.1. fadeInOut
  - 1.1.1. 메서드 활용
  - 1.1.2. 클래스 활용
- 1.2. 이동
2. 인디케이터가 있는 슬라이드
1. 기본 슬라이드

1.1. fadeInOut

1.1.1. 메서드 활용

예제
HTML
CSS
JS
리소스 이미지
http://qwerew.cafe24.com/images/1.jpg
<body>
#crossfade {

방법1
$(() => {

1.1.2. 클래스 활용
미리보기
HTML
CSS
JS
<body>
#crossfade {
$(() => {

1.2. 이동
jQuery1 미리보기
jQuery2 미리보기
HTML
<div id="content">
  <h3>Slideshow</h3>
  <ul id="crossfade">
    <li>
      <a href="#"><img src="http://qwerew.cafe24.com/images/1.jpg" alt="" /></a>
      <p>1번</p>
    </li>
    <li>
      <a href="#"><img src="http://qwerew.cafe24.com/images/2.jpg" alt="" /></a>
      <p>2번</p>
    </li>
    <li>
      <a href="#"><img src="http://qwerew.cafe24.com/images/3.jpg" alt="" /></a>
      <p>3번</p>
    </li>
  </ul>
</div>

CSS
#crossfade {
  position: relative;
  margin: auto;
  padding: 0;
  list-style-type: none;
  width: 600px;
  height: 400px;
  overflow: hidden;
}

#crossfade li {
  position: absolute;
  width: 600px;
  height: 400px;
}

#crossfade p {
  position: absolute;
  bottom: 0;
  padding: 20px;
  color: #fff;
  background: #000;
  background-color: rgba(0, 0, 0, 0.6);
  margin: 0;
  left: 0;
  right: 0;
}

JQurey1
const slide = $('#crossfade li');

// 정렬
slide.each((i, o) => {
  $(o).css('left', i * 100 + '%');
});

let idx = 0;

// 무한루프를 위한 setInterval
setInterval(() => {
  slide
    .eq(idx)
    .stop()
    .animate({ left: -100 + '%' }, 1000, function () {
      $(this).css('left', (slide.length - 1) * 100 + '%');
    });
  idx++;
  if (idx > slide.length - 1) {
    idx = 0;
  }
  slide
    .eq(idx)
    .stop()
    .animate({ left: 0 + '%' }, 1000);
}, 3000); // 3초마다 반복

JQurey2
    const slide = $('#crossfade li');
    let current = 0;
    // 정렬
    slide.each((i, o) => {
      $(o).css('left', i * 100 + '%');
    });

    setInterval(function () {
      var prev = slide.eq(current);
      move(prev, 0, '-100%');
      current++;
      if (current == slide.length) {
        current = 0;
      }
      var next = slide.eq(current);
      move(next, '100%', '0%');
    }, 3000);

    function move(tg, start, end) {
      tg.css('left', start).stop().animate({ left: end }, 1000);
    }

코드
HTML
CSS
JQ
JS
제이쿼리슬라이드
자바스크립트슬라이드
완성화면
<div class="slide_wrap">
/* common */
$(() => {
const visual = document.querySelectorAll('#brandVisual>ul>li');
목차
1. 기본 슬라이드
1.1. fadeInOut
1.2. 이동