投稿日:2021/11/19
更新日:2022/12/07
旧ROOK用のスライドがあります。
EPRESSのslickではなく下記のソースを使用してください。
https://www.kosobatei.jp/
ソースもと:
http://x7012866.xaas3.jp/app/Blogarticleview/index/ArticleId/10
※動いていない画像等を消すとソースが出てきます。
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"> </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
※動いていない画像等を消すとソースが出てきます。