Simple Slider

sliders_jquery plugin으로 간단한 Slider 구현하기



jQuery Plugin 준비

							<script type="text/javascript" src="/florakid_lib/js/slides.jquery.js"></script>
						


HTML 구조화

							<div class="event_area">
								<div id="eventSliders">
									<div class="slides_container">
										<a href="#" class="evt_01"><img src="/florakid_lib/images/sample2/temp/temp_evt_01.gif" alt="" /></a>
										<a href="#" class="evt_01"><img src="/florakid_lib/images/sample2/temp/temp_evt_02.gif" alt="" /></a>
										<a href="#" class="evt_01"><img src="/florakid_lib/images/sample2/temp/temp_evt_03.gif" alt="" /></a>
									</div>
								</div>
							</div><!-- /event_area -->
						


CSS 커스터마이징

							/* event_area - slider styling */
							.event_area {float:left;position:relative;height:192px;}
							#eventSliders{position:absolute;top:0;left:0;border:1px solid #e5e5e5;}
							#eventSliders .slides_container{width:696px;height:190px;overflow:hidden;}
							.pagination{position:absolute;top:10px;right:10px;overflow:hidden;zoom:1;z-index:100;}
							.pagination li{float:left;padding-right:5px;}
							.pagination li a{display:block;width:10px;height:10px;background:url('/florakid_lib/images/sample2/temp/btn_circle.png') no-repeat 0 0;text-indent:-9990px;}
							.pagination li.current a{background:url('/florakid_lib/images/sample2/temp/btn_circle_on.png') no-repeat 0 0;}									
						


Javascript 실행 코드

							/* event area*/
							$(document).ready(function(){
								$("#eventSliders").slides({
									preload: true,
									preloadImage: 'img/loading.gif',
									play: 5000,
									pause: 1000,
									fadeSpeed: 0,
									hoverPause: true,
									effect: 'fade'
								});
							});
							/* event area end*/