09_slide

<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>

#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;
}

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초마다 반복

		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);
		}