210113 완전 심플 슬라이더2(자동으로 넘어가는 이미지 슬라이더)

 

구글에 carousel slider plugin 등등 조합해서 검색하면 굳이 안 만들어도 사용이 쉽고 간편하고 예쁜 슬라이더 많다. 그럼에도 굳이 만들어 쓰는건 아주 간단한 코드로 내가 나중에 다시 봐도 헷갈리지 않고 필요한 거 수정 변경해서 쓰고 싶기 때문이다.

 

이 슬라이더는 좌, 우 버튼 없이 설정한 시간에 맞춰 자동으로 다음 이미지로 넘어간다.

 

HTML

<div id="wrapper">
	<ul class="slider_ul" id="slider_ul_3">
		<li class="slider_li"><p><img src="http://blahblah/image1.gif"></p></li>
		<li class="slider_li"><p><img src="http://blahblah/image2.gif"></p></li>
	</ul>
</div>

 

CSS

#wrapper {
	width:100%;
	text-align:center;
	height:600px;
	}
.slider_ul {
	display:inline-block;
	vertical-align:top;
	}
.slider_li {
	display:none;
	}

 

javascript : 아래 코드 중 i 부분에 이미지 슬라이더가 있는 ul의 아이디를 적어준다. 속도 조절은 3500 부분을 변경.

 

$(document).ready(function() {
	timer();
});

function timer() {
	idx=0;
	i = $('#slider_ul_3').children('.slider_li');
	num = i.length-1;
	setInterval(function() {
		idx++;
		if (idx>num) {idx=0};
	
		i.hide();
		i.eq(idx).css({'display':'block','opacity':0}).animate({'opacity':1},800);	
	}, 3500);
}

 

끝