自由記入欄にスライドを設置する

2013-08-05 16:50
自由記入欄など、管理画面に［HTMLタグ使用可］のアイコンがある項目にスライドを設置できます。
ご自身でHTMLタグの記述を行い、設定してください。
※携帯版には設置できません。

こちらのデモサイトで、実際のスライド表示を確認できます。
https://cafe0808.ocnk.net

スライド用HTMLコードの例
※ <li>タグ部分を繰り返して記載することで、複数の画像を表示できます。
<div class="item_list layout_photo">
<div class="swipe_list" data-autoplay="on" data-interval="5000" data-cols="3" data-adjustment="on">
<div class="list_item_table col3">
<ul class="list_item_row clearfix">
<li class="list_item_cell">
<div class="item_data">
<div class="inner_item_data">
<div class="list_item_photo">
<a class="item_image_box" href="https://demo.ocnk.net/product/1">
<img width="150" height="150" data-retention="1" alt="XXXXXXXXXXXX" src="https://demo.ocnk.net/data/demo/product/example.jpg" />
</a>
</div>
<div class="list_item_data">
<p class="item_name"><a href="https://demo.ocnk.net/product/1">商品名</a></p>
<p class="price">価格</p>
</div>
</div>
</div>
</li>
</ul>
<div class="pointer_box">
<span class="pointer_prev"></span>
<span class="pointer"></span>
<span class="pointer_next"></span>
</div>
</div>
</div>
</div>
名前 機能 値
data-autoplay 自動再生する/しない "on",  "off",  "notStop"(※操作しても自動停止しない)
data-interval 自動再生の間隔 "5000" (※ミリ秒)
data-cols 表示列数 "3", "1"
data-adjustment 画像の高さを自動的に
揃える/揃えない		 "on"(※余白を加えて揃える)
"off"(※全て同じ画像サイズの場合)
"min"(※最小の高さに合わせる)

ご注意事項
表示画像が多い場合、動作が重くなる可能性があります。ご注意ください。