旧ROOK案件のスライド

旧ROOK用のスライドがあります。
EPRESSのslickではなく下記のソースを使用してください。

設置ページのスクリプト欄

※案件にjquery.cycle.all.jsがない場合は設置例のものを流用してください。

<link href="/docs/css/slide.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/docs/js/jquery.cycle.all.js"></script>
<script type="text/javascript">
  $(function(){$('.slide--pager').empty();});
  $('#fade').cycle({
    fx: 'fade',
    speed: 600,
    timeout: 7000,
    autostop: 0,
    pager: '.slide--pager',
    prev: '.slide--prev',
    next: '.slide--next'
  });
</script>

HTML

<div class="slide">
<div class="slide--pics" id="fade">
<img alt="" src="http://●●●●.xaas3.jp/images/material/image1.jpg"> 
<img alt="" src="http://●●●●.xaas3.jp/images/material/image2.jpg"> 
<img alt="" src="http://●●●●.xaas3.jp/images/material/image3.jpg"> 
<img alt="" src="http://●●●●.xaas3.jp/images/material/image4.jpg"> 
<img alt="" src="http://●●●●.xaas3.jp/images/material/image5.jpg">
</div>
<div class="slide--nav">
<div class="slide--pager">&nbsp;</div>
<a class="slide--prev" href="#">前へ</a>
 <a class="slide--next" href="#">次へ</a>
</div>
</div>

slide.css

.slide {
  position: relative;
  z-index: 10;
}
.slide--pics,
.slide--pics img { /* スライドの縦横をpx指定 */
  width: 770px;
  height: 300px;
}
.slide--pager a,
.slide--prev,
.slide--next {
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap;
}
 
.slide--pager { /* ページャー部分の縦横 */
  width: 120px;
  height: 10px;
  margin: 15px auto 30px;
  z-index: 10;
}
.slide--pager a { /* ページャーボタン */
  width: 8px;
  height: 8px;
  margin: 0 8px;
  background-image: url(../../images/material/btn_lineup_pager.png);
  background-repeat: no-repeat;
  background-position: left top;
  display: block;
  float: left;
}
.slide--pager a.activeSlide { /* :hover */
  background-position: left -9px;
}
.slide--prev,
.slide--next  { /* 前後ボタン */
  position: absolute;
  top: 145px;
  z-index: 10;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: left top;
  display: block;
}
.slide--prev {
  left: 10px;
  background-image: url(../../images/material/scroll_btn_left.png);
}
.slide--next {
  right: 10px;
  background-image: url(../../images/material/scroll_btn_right.png);
}

参考

設置例：
https://www.kosobatei.jp/
ソースもと：
http://x7012866.xaas3.jp/app/Blogarticleview/index/ArticleId/10
※動いていない画像等を消すとソースが出てきます。