Clycle jQuery 이용해서 html 이미지 슬라이드 만들기

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>

작성하고자 하는 html <head></head>에 스크립트를 넣는다.

2021년 기준, 해당 소스가 연결되지 않는다. 아래 링크에서 다운받아 연결해 사용해도 된다.

<script src="jquery.min.js"></script>
<script src="jquery.cycle2.js"></script>
<div class="cycle-slideshow" data-cycle-loader="wait" data-cycle-timeout="5000" data-cycle-speed="800" data-cycle-pause-on-hover="true" data-cycle-fx="scrollHorz" data-cycle-prev="#prev" data-cycle-next="#next">
  <img src="http://www.hanjinjp.com/img/top_counter_2.jpg">
  <img src="http://www.hanjinjp.com/img/top_osarj.jpg">
  <img src="http://www.hanjinjp.com/img/top_cgo.jpg">
  <img src="http://www.hanjinjp.com/img/top_jinair.jpg">
  <img src="http://www.hanjinjp.com/img/top_logo_1.jpg">

  <div class="cycle-pager"></div>
  <div style="text-align: center;">
    <a href=# id="prev">Prev</a>
    <a href=# id="next">Next</a>
  </div>
</div>

별도의 css 파일을 만들어 연결해도 되고, 그냥 html 본문에 <style></style> 로 구성해도 된다.

<style type="text/css">
.cycle-slideshow, .cycle-slideshow * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.cycle-slideshow {
  width: 880px;
  min-width: 200px;
  max-width: 880px;
  margin: 10px auto;
  padding: 0;
  position: relative;
}
.cycle-slideshow div.slide {
  width: 100%;
  height: 100%
}
.cycle-slideshow img {
    /*
    some of these styles will be set by the plugin (by default) but setting them here
    helps avoid flash-of-unstyled-content
    */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0;
  display: block;
  border-radius: 15px;
}
/* in case script does not load */
.cycle-slideshow img:first-child {
  position: static;
  z-index: 100;
}
.cycle-pager {
  text-align: center;
  width: 100%;
  z-index: 999;
  position: absolute;
  top: 2px;
  overflow: hidden;
}
.cycle-pager span {
  font-family: arial;
  font-size: 60px;
  width: 30px;
  height: 20px;
  display: inline-block;
  color: #ddd;
  cursor: pointer;
}
.cycle-pager span.cycle-pager-active {
  color: #D69746;
}
.cycle-pager> * {
  cursor: pointer;
}
</style>