無料ホームページテンプレート Template Party

スライドショー(slick)の解説

※当ページの解説以外のサポートは基本的には行なっておりませんので、使いこなしたい方はGoogle検索などかけてみて下さい。
slick 公式サイト

slickのスタイルは、cssフォルダのstyle.cssで設定しています。それ以外に、jsフォルダのslick.jsにも設定があります。スライドの速度はこのslick.js内の「autoplaySpeed」で調整できます。
他、slickには様々なオプションもあるので気になる人、カスタマイズしたい場合は「slick オプション」などでGoogle検索してみて下さい。

画像の追加方法
html側に既存のタグをコピペするだけでOKです。
例えば「4.jpg」という画像をスライドショーに1枚追加したい場合、現状では、
<aside class="mainimg">
<div><img src="images/1.jpg" alt=""></div>
<div><img src="images/2.jpg" alt=""></div>
<div><img src="images/3.jpg" alt=""></div>
</aside>

ですが、これに1行加えるだけです。
<aside class="mainimg">
<div><img src="images/1.jpg" alt=""></div>
<div><img src="images/2.jpg" alt=""></div>
<div><img src="images/3.jpg" alt=""></div>
<div><img src="images/4.jpg" alt=""></div>
</aside>

画像ごとにリンクも設定できます
通常の画像へのリンク設定と同じやり方でOKです。
<div><a href="index.html"><img src="images/1.jpg" alt=""></a></div>

slickを使う為に必要なタグ、ファイル類。
1. html下部にある、「jQueryの読み込み」のタグ。※slick.jsより上の行で読み込んで下さい。
2. その下にある、「スライドショー(slick)」のタグ。
3. jsフォルダ内のslick.jsファイル。

何年も経過した場合、動作に問題が出てくる可能性があります。
テンプレートを編集していないのに突然動きがおかしくなった場合は、CDNから読み込んでいるjQueryのバージョン及びslick関連のファイルのバージョンを変更して動作するか確認してみて下さい。

スライドショーでなく、固定画像にしたい場合。
1. htmlのスライドショー画像のうち、残したい画像以外を削除。
2. html下部にある、「スライドショー(slick)」のブロックを削除。
3. jsフォルダのslick.jsファイルも合わせて削除しておきます。
4. 上記の作業までで固定画像になりますが、関連スタイルを削除しておきたいなら、cssフォルダのstyle.cssの、
/*スライドショー(slickを使用)
からのブロックを全部削除して下さい。

その他のサービスOthers Service

クイックCMS