取扱説明書 > ご利用マニュアル > スライダーを設置する

スライダーを設置する

編集中のファイルの編集モードを「ソース」にします。

「FlexSlider 2(http://flexslider.woothemes.com/)」を使います。ダウンロードして、解凍したフォルダを「flexslider」にリネームして、作業中のindex.htmlと同じ階層に置いてください。

フェードインフェードアウトも同じですので、既に設置済みの方はこのステップはとばしてください。

※「changelog.txt」「demo」「jquery.flexslider.js」「README.mdown」は不要ですので、余計なものを置いておきたくない人は消しも大丈夫です。

<head>〜</head>に以下のコードを記述して下さい。

フェードインフェードアウトも同じですので、既に設置済みの方はこのステップはとばしてください。

<script type="text/javascript" src="flexslider/jquery.flexslider-min.js"></script>
<link rel="stylesheet" href="flexslider/flexslider.css" type="text/css" media="screen" />

下記のコードをソース内の表示させたい場所に記述してください。

<!-- ▼ スライダー ここから ▼ -->
<div class="flexslider slide">
<ul class="slides">
<li><img src="img/main-image1.jpg" /></li>
<li><img src="img/main-image2.jpg" /></li>
<li><img src="img/main-image3.jpg" /></li>
<li><img src="img/main-image4.jpg" /></li>
</ul>
</div>
<script language="JavaScript" type="text/javascript">
<!--
$(window).load(function() {
$('.slide').flexslider({
animation: "slide",
slideshowSpeed: 6000,
animationSpeed: 800,
animationLoop: true
});
});
// -->
</script>
<!-- ▲ スライダー ここまで ▲ -->

<img src="img/main-imagexxx.jpg" />の「main-imagexxx.jpg」の部分を、あらかじめ「img」フォルダに用意しておいた画像のファイル名と置換します。

<!-- ▼ スライダー ここから ▼ -->
<div class="flexslider slide">
<ul class="slides">
<li><img src="img/main-image1.jpg" /></li>
<li><img src="img/main-image2.jpg" /></li>
<li><img src="img/main-image3.jpg" /></li>
<li><img src="img/main-image4.jpg" /></li>
</ul>
</div>
<script language="JavaScript" type="text/javascript">
<!--
$(window).load(function() {
$('.slide').flexslider({
animation: "slide",
slideshowSpeed: 6000,
animationSpeed: 800,
animationLoop: true
});
});
// -->
</script>
<!-- ▲ スライダー ここまで ▲ -->

<li><img src="...</li>の行を消すとスライドの数が減ります。逆に増やすとスライドの数が増えます。

<!-- ▼ スライダー ここから ▼ -->
<div class="flexslider slide">
<ul class="slides">
<li><img src="img/main-image1.jpg" /></li>
<li><img src="img/main-image2.jpg" /></li>
<li><img src="img/main-image3.jpg" /></li>
<li><img src="img/main-image4.jpg" /></li>
</ul>
</div>
<script language="JavaScript" type="text/javascript">
<!--
$(window).load(function() {
$('.slide').flexslider({
animation: "slide",
slideshowSpeed: 6000,
animationSpeed: 800,
animationLoop: true
});
});
// -->
</script>
<!-- ▲ スライダー ここまで ▲ -->

サイズは自動的に横幅いっぱいに調整されますので、大きめの画像を用意しておくと良いと思います。

 目次に戻る

ご利用マニュアル

Page top icon