Javascript & JQuery & CSS

http://ankyu.entersoft.kr/lecture/jquery/jquery.cycle2/test01.asp
http://ankyu.entersoft.kr/lecture/jquery/jquery.cycle2/test02.asp
http://ankyu.entersoft.kr/lecture/jquery/jquery.cycle2/test03.asp

<div class="cycle-slideshow">
     <img src="/images/img1.jpg">
     <img src="/images/img2.jpg">
     <img src="/images/img3.jpg">
     <img src="/images/img4.jpg">
</div>

위와 같은 형태로 사용하시면 됩니다.

옵션은 div에 적어주면 됩니다.
자바스크립트 수정을 하지 않고, css 수정을 하지 않고 div에 바로 옵션설정을 할 수 있습니다.
 

<div class="cycle-slideshow"
   data-cycle-fx="scrollHorz"
   data-cycle-pause-on-hover="true"
   data-cycle-speed="200">
     <img src="/images/img1.jpg">
     <img src="/images/img2.jpg">
     <img src="/images/img3.jpg">
     <img src="/images/img4.jpg">
</div>

아래처럼 다양한 옵션이 존재 합니다.
 

<style>

.topCard {border:1px solid #EEE;padding:5px;width:273px;height:100px;}
.topCard .slide {margin:10px;border:1px solid red;}

.topCard .per-slide-template span {border:1px solid red;padding:10px;}
</style>
	<!--
	fade
	scrollHorz
	carousel
	-->
	<div class="topCard cycle-slideshow" 
	data-cycle-fx="carousel"
	data-cycle-timeout="3000"
	data-cycle-speed="1000"
	data-cycle-slides="> .slide"
	data-cycle-carousel-visible="1"
	data-cycle-carousel-vertical="false"
	data-cycle-log="false"
	data-cycle-pause-on-hover="true"
	data-cycle-pager="#per-slide-template">
		<div class="slide" data-cycle-pager-template="<span>Sprint1</span>">
			<a href="#" ><img src="img_top_ad03.gif" /></a>
		</div>
		<div class="slide" data-cycle-pager-template="<span>Spring2</span>">
			<a href="#" ><img src="img_top_ad02.gif" /></a>
		</div>
		<div class="slide" data-cycle-pager-template="<span>Spring3</span>">
			<a href="#" ><img src="img_top_ad01.gif" /></a>
		</div>
		<div class="slide" data-cycle-pager-template="<span>Spring4</span>">
			<a href="#" ><img src="img_top_ad02.gif" /></a>
		</div>
	</div>

	<br><br>
	<div id=per-slide-template style=""></div>

	<br><br>

	<div id="buttons">
    <span data-cycle-cmd="prev">Prev</span>
    <span data-cycle-cmd="next">Next</span>
    <span data-cycle-cmd="pause">Pause</span>
    <span data-cycle-cmd="resume">Resume</span>    
	</div>

슬라이드 쇼 높이 자동조절방법

 <div class="topCard cycle-slideshow"
 data-cycle-fx="carousel"
 data-cycle-timeout="3000"
 data-cycle-speed="1000"
 data-cycle-slides="> .slide"
 data-cycle-carousel-visible="1"
 data-cycle-carousel-vertical="false"
 data-cycle-log="false"
 data-cycle-pause-on-hover="true"
 data-cycle-pager="#per-slide-template"
 data-cycle-auto-height="3:2"
>

</div>

 data-cycle-auto-height="3:2" 옵션을 추가해 주면 됩니다. 비율대로 표시가 됩니다.

슬라이드쇼를 시작할때 멈춰있는 수동인 상태 (paused) 로 시작하고 싶을 경우

data-cycle-paused="true"

옵션을 추가하면 됩니다.