Seesaa ブログカスタマイズ FlexSlider jquery HTML編集 テンプレートの編集 スライダー 画像のローテンション スマホのテンプレート スタイルシートの編集 シンプルA.ホワイト オプション設定 新デザインシステム ヘッダーカスタマイズ カスタマイズ サムネイル付スライダー カルーセル

flexsliderイメージ

今回は、マーケットや投資情報から離れて「Seesaaのブログ」の、おそらく誰もやっていない部分のカスタマイズを記事にしたいと思います。

このサイトで使用しているブログシステムは「Seesaa」の新デザインシステムを使用しています。使い始めて約1ヶ月ですが、ブログ開始当初は、デフォルトのテンプレートのまま使用するつもりだったのですが、ちょこちょこカスタマイズしているうちに面白くなってしまい、結構はまってきてしまいました。

だいぶデザインが変わってきていますが使っているテンプレートはデフォルトの「シンプルA.ホワイト 右カラム」です。「Seesaa」を使っている方ならわかりますよね。そうです。最初に設定されているあれです。

今回カスタマイズで紹介したい所は結構大きなところですよ・・・。

見た目にかなり変化があります。

ヘッダー部分のスライダー（ブログタイトル下で写真が切り替わっているところ）を紹介いたします。

ヘッダー部分のスライダーイメージ

ウェブには数々のSeesaaのブログのカスタマイズ記事が転がっていますが、これはきっとないと思いますよ。あったらすいません。どのくらい参考にされる方がいるかな（*＾-＾*）

今回、すべてを紹介しようかと思ったのですが、かなり記事が長くなりましたのでPart1とし、下記のようなスライダーを記事中に表示させるところまでを行います。記事の雰囲気がぐっと引き立つと思いますが、いかがでしょう。

  • 犬のサンプル写真
  • ブルーベリーのイメージサンプル写真
  • 窓辺のイメージサンプル写真
  • テーブルのイメージサンプル写真
  • 窓辺のソファーのイメージサンプル写真

デザインのアウトライン

まず初めにどういう仕組みになっているのかを説明いたします。
ヘッダー部分の背景を透明にしてその下に画像のスライダー（画像のローテンション）を表示させます。また、スライダー部分はブラウザの上部に固定し、スクロールしてもスライダーが動かないようにしています。

デザインのアウトラインイメージ

必要な材料を準備します

スライダー（写真や画像の表示を切り替えるスクリプト）には jQueryプラグインの［FlexSlider］を使用します。
［FlexSlider］はレスポンシヴでフリックやスワイプにも対応しています。ヘッダーの背景に使用する場合は、画像をローテンションで表示させているだけですので、それらは使用しませんが、高機能で非常に使いやすいスライダーです。

１，［FlexSlider］のプラグイン本体を下記サイトよりダウンロード。
（2016年10月現在のバージョンはv2.6.3）

FlexSlider 2

２，［jQuery］を下記サイトよりダウンロード。
現在、最新バージョン3.1.1がダウンロード可能なようです。バージョン1.7あたりや2.0でも動くようです。

jQuery

jQueryはダウンロードしなくても、googleの配信しているタグを設置するだけでも可能です。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

最新のタグは以下のページで確認。

Google Hosted Libraries

３，スライダーに使用する画像を準備します。数はいくつでも結構です。ただ2枚とかだと少し寂しいかな。

スライダーに必要なファイルを取り出す

まず、先ほどダウンロードした［FlexSlider］を解凍して必要なファイルを取り出します。似た名前のものがありますので間違えないように注意してください。

１，jquery.flexslider-min.js（flexsliderのプログラム本体）
※「jquery.flexslider.js」も「jquery.flexslider-min.js」も内容は同じでどちらでも動きますが、min.jsは改行やスペースを削除してファイルサイズが小さくなっています。Scriptに手を加えないのであればmin.jsの方を使用してください。
２，flexslider.css
３，fontsフォルダ
※中に含まれているものすべて「flexslider-icon.eot」「flexslider-icon.svg」「flexslider-icon.ttf」「flexslider-icon.woff」。
画像をローテーションさせるだけであれば「fontsフォルダ」は必要ないのですが、後々他の用途にも使用されるのであれば必要です。flexsliderの以前のバージョンでは画像を使用していたようですが、今回使用するv2.6.3では、矢印やアイコンなどにフォントやSVGを使用しているようです。

flexslider.cssを編集する

「flexslider.css」の18行目の以下の部分を編集します。
普通のサイトであれば編集する必要がないのですが、Seesaaの場合「image」ディレクトリの下に「fonts」ディレクトリを作れないので（「image」ディレクトリと同階層にならば作れるのですが・・・）、「fonts/」の部分を削除します。
本当はScriptは「js」ディレクトリ、cssは「css」ディレクトリ、fontsは「fonts」ディレクトリと分けて整理したいところですが無料のブログシステムですので、すべてのアップロード先は「image」ディレクトリでよしとしましょう。いろんなファイルがアップできるだけでもうれしいですね。

■変更前

src: url('fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'), url('fonts/flexslider-icon.woff') format('woff'), url('fonts/flexslider-icon.ttf') format('truetype'), url('fonts/flexslider-icon.svg#flexslider-icon') format('svg');

■変更後

src: url('lexslider-icon.eot?#iefix') format('embedded-opentype'), url('flexslider-icon.woff') format('woff'), url('flexslider-icon.ttf') format('truetype'), url('flexslider-icon.svg#flexslider-icon') format('svg');

Seesaaのスタイルシートの影響があるようで、矢印が欠けて表示されましたので下記も変更します。

.flex-direction-nav a:before {
font-family: "flexslider-icon";
font-size: 40px;
line-height: 40px; /* 追加 */
display: inline-block;

content: '\f001';
color: rgba(0, 0, 0, 0.8);
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
}

ファイルをアップロードする

Seesaaの管理画面の「ファイルマネージャ」を開きます。
「クリック、もしくはここにファイルをドロップ」の部分に「jquery.flexslider-min.js」と「flexslider.css」。fontsフォルダの中身をドロップしてアップロードします。
同じ要領でスライダーに必要な画像もアップロードしましょう。もし、ヘッダー部分に画像を表示させたいのであれば、左右の画像サイズが1500pix以上あるものをアップしてください。「記事部分にスライダーが表示されればいい」と思われている方は左右の画像サイズが800pix位あれば十分です。

Seesaa管理画面・ファイルのアップロード

Seesaaのhtmlテンプレートを編集

Seesaaブログのテンプレートを編集する必要がありますので、seesaaの管理画面より下記の順番でクリックし、使用中のテンプレートのHTML編集タブを開きます。
デザイン ＞ PC（タブ） ＞ デザイン設定 ＞ シンプルA.ホワイト 右カラム（他のテンプレートを使用中ならばそれを） ＞ HTML編集（タブ）

Seesaa管理画面・HTML編集

スタイルシートとスクリプトを読み込ませるために、ヘッダー（<head>〜</head>）部分を下記のように変更します。
■変更前

<link rel="stylesheet" href="<% site_view.page_url_css -%>" />
<link rel="stylesheet" href="<% site_info.blog_url -%>/css/user-common.css" />
<link rel="alternate" href="<% blog.page_url -%>index.rdf" type="application/rss+xml" title="RSS" />
<script src="<% site_info.blog_url -%>/js/html5shiv.min.js"></script>
</head>

■変更後

<link rel="stylesheet" href="<% site_view.page_url_css -%>" />
<link rel="stylesheet" href="<% site_info.blog_url -%>/css/user-common.css" />
<link rel="stylesheet" href="/image/flexslider.css"> <!-- 追加 -->
<link rel="alternate" href="<% blog.page_url -%>index.rdf" type="application/rss+xml" title="RSS" />
<script type="text/javascript" src="/image/jquery-3.1.0.min.js"></script> <!-- 追加 -->
<script type="text/javascript" src="/image/jquery.flexslider-min.js"></script> <!-- 追加 -->
<script src="<% site_info.blog_url -%>/js/html5shiv.min.js"></script>
</head>

変更した後は「バックアップして保存」をクリックします。

Seesaaのスタイルシートを編集

続いてスタイルシートを編集します。先ほどのHTML編集（タブ）のすぐ隣にあるタブを開きます。
デザイン ＞ PC（タブ） ＞ デザイン設定 ＞ シンプルA.ホワイト 右カラム（他のテンプレートを使用中ならばそれを） ＞ スタイルシート編集（タブ）

スタイルシートを編集しないとスライダーに不要な余白とlist-styleが表示されています。305行目から「.module」を追加して書き換えます。

デフォルトのテンプレートは「article__content」のul、ol、li、table等にmarginやlist-styleを付けてしまっています。記事内にul、ol、li、table等を入れた場合にもそれらが影響しますので余り良くありません。
［FlexSlider］はul、ol、liのタグを使用しますので記事内に配置した場合激しく影響します。Seesaaのhtmlコードをざっと見たところ、moduleのクラス以外ではul、ol、liのタグは使っていなそうなので、少し強引かもしれませんが.moduleを加えます。
■変更前

.article__content ul,
.article__contentol {
margin: 12px 0;
}

.article__content ul li {
list-style: disc;
margin: 0 0 0 2.4em;
}

.article__content ol li {
list-style: decimal;
margin: 0 0 0 2.4em;
}

.article__content table {
border-color: #333;
}

.article__content thead {
background-color: #999;
}

.article__content tfoot,
.article__content tbody {
background-color: #fff;
color: #333;
}

.article__content td,<
.article__content th {
padding: 0px 10px;
}

■変更後

.article__content .module ul,
.article__content .module ol {
margin: 12px 0;
}

.article__content .module ul li {
list-style: disc;
margin: 0 0 0 2.4em;
}

.article__content .module ol li {
list-style: decimal;
margin: 0 0 0 2.4em;
}

.article__content .module table {
border-color: #333;
}

.article__content .module thead {
background-color: #999;
}

.article__content .module tfoot,
.article__content .module tbody {
background-color: #fff;
color: #333;
}

.article__content .module td,
.article__content .module th {
padding: 0px 10px;
}

動作を確認する

新規投稿でscriptとスライダーのタグを投稿してみて、画像がローテンションするかどうかを確認します。

サンプルを３点投稿してみました。
それぞれ、上が投稿したコードで、下がそのコードによって表示されているサンプルです。
「html」を見るとわかりますが、<ul class=”slides”>のリストになっています。画像は<li></li>のタグの間に入れます。

画像を投稿するときに「サムネイルで表示」「別ウィンドウで原寸大表示」のチェックを外します。（※チェックを入れておいてもかまいません）［FlexSlider］はレスポンシブ対応なので、画像サイズが大きくてもコンテンツにあわせてくれます。
そして投稿を保存するときに必ず「改行HTMLタグ変換」の「改行を<br/>タグに変換しない」にチェックを入れてください。

「改行は<br/>タグに変換する」 をチェックして投稿されている方は、スライダー部分の改行をすべて取ってから投稿してください。取らずに投稿すると表示が乱れます。

■１，通常のスライダー
<script type="text/javascript" charset="utf-8">
$(function(){
$('#flex1').flexslider({
prevText: "",
nextText: "",
});
});
</script>
<div class="flexslider" id="flex1">
<ul class="slides">
<li><img border="0" alt="20161009photo1.jpg" src="http://info.milli.jp/image/20161009photo1.jpg" width="1500" height="900"></li>
<li><img border="0" alt="20161009photo2.jpg" src="http://info.milli.jp/image/20161009photo2.jpg" width="1500" height="900"></li>
<li><img border="0" alt="20161009photo3.jpg" src="http://info.milli.jp/image/20161009photo3.jpg" width="1500" height="900"></li>
<li><img border="0" alt="20161009photo5.jpg" src="http://info.milli.jp/image/20161009photo5.jpg" width="1500" height="900"></li>
<li><img border="0" alt="20161009photo4.jpg" src="http://info.milli.jp/image/20161009photo4.jpg" width="1500" height="900"></li>
</ul>
</div>
  • 犬のサンプル写真
  • ブルーベリーのイメージサンプル写真
  • 窓辺のイメージサンプル写真
  • テーブルのイメージサンプル写真
  • 窓辺のソファーのイメージサンプル写真
■２，サムネイル付きのスライダー
<script type="text/javascript" charset="utf-8">
$(function(){
$('#flex2').flexslider({
animation: "slide",
prevText: "",
nextText: "",
controlNav: "thumbnails"
});
});
</script>
<div class="flexslider" id="flex2">
<ul class="slides">
<li data-thumb="http://info.milli.jp/image/20161009photo1.jpg"><img border="0" alt="20161009photo1.jpg" src="http://info.milli.jp/image/20161009photo1.jpg" width="1500" height="900"></li>
<li data-thumb="http://info.milli.jp/image/20161009photo2.jpg"><img border="0" alt="20161009photo2.jpg" src="http://info.milli.jp/image/20161009photo1.jpg" width="1500" height="900"></li>
<li data-thumb="http://info.milli.jp/image/20161009photo3.jpg"><img border="0" alt="20161009photo3.jpg" src="http://info.milli.jp/image/20161009photo1.jpg" width="1500" height="900"></li>
<li data-thumb="http://info.milli.jp/image/20161009photo4.jpg"><img border="0" alt="20161009photo4.jpg" src="http://info.milli.jp/image/20161009photo1.jpg" width="1500" height="900"></li>
</ul>
</div>
  • 犬のサンプル写真
  • ブルーベリーのイメージサンプル写真
  • 窓辺のイメージサンプル写真
  • 窓辺のソファーのイメージサンプル写真
■３，カルーセル
<script type="text/javascript" charset="utf-8">
$(function(){
$('#flex3').flexslider({
animation: "slide",
itemWidth: 210,
itemMargin: 5,
prevText: "",
nextText: "",
});
});
</script>
<div class="flexslider" id="flex3">
<ul class="slides">
<li><img border="0" alt="20161009photo1.jpg" src="http://info.milli.jp/image/20161009photo1.jpg" width="1500" height="900"></li>
<li><img border="0" alt="20161009photo2.jpg" src="http://info.milli.jp/image/20161009photo2.jpg" width="1500" height="900"></li>
<li><img border="0" alt="20161009photo3.jpg" src="http://info.milli.jp/image/20161009photo3.jpg" width="1500" height="900"></li>
<li><img border="0" alt="20161009photo5.jpg" src="http://info.milli.jp/image/20161009photo5.jpg" width="1500" height="900"></li>
<li><img border="0" alt="20161009photo4.jpg" src="http://info.milli.jp/image/20161009photo4.jpg" width="1500" height="900"></li>
</ul>
</div>
  • 犬のサンプル写真
  • ブルーベリーのイメージサンプル写真
  • 窓辺のイメージサンプル写真
  • テーブルのイメージサンプル写真
  • 窓辺のソファーのイメージサンプル写真

いかがでしたか？
スライダーを投稿することで、記事をとても表情豊かに飾り付けできると思いませんか？是非いろいろな場面でご活用ください。

スマートフォン問題

PCではこれで問題ないのですが、スマホの場合問題が出ます。

Seesaaのシステムは、PCとスマホのテンプレートがそれぞれ別になっており、スマホはスタイルシートの編集できるのですが、HTML編集ができません。従ってこのままでは［FlexSlider］が動かずに画像が縦に並んでしまいます。格好悪い(≧ロ≦)

デザイン ＞ スマートフォン ＞ コンテンツ　と進みヘッダー部分に「自由形式」を入れて、その中に「jquery」、「jquery.flexslider-min.js」、「flexslider.css」を読み込ませてみましたがうまくいきませんでした。
スマホサイトには下記jqueryが、フッターより後のページ最下部付近に読み込まれていますので、それが原因かもしれません。ただ、HTML編集ができないのでそれを削除することができません。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

もう少し、試行錯誤してみてもよいのですが、ゆくゆくはPCとスマホのhtmlを共通にしたレスポンシブ（同じhtmlコードであらゆる画面サイズのディバイスに対応）にしたいと思っています。現状のテンプレート「シンプルA.ホワイト 右カラム」は中途半端にレスポンシブに対応になっています。
ですので、今回は簡易的な措置としてスマホでは１番はじめの画像のみ表示するように変更します。これで画像がたくさん縦に並ぶことがなくなります(^_^;)

デザイン ＞ スマートフォン（タブ） ＞ デザイン設定 ＞ basic（他のテンプレートを使用中ならばそれを）を選択してスタイルシートを編集します。
スタイルシートの一番最後に下記を追加します。どういうことが書いてあるのかというと、「スライダーの画像を一度全部非表示にして、その後最初のものだけを表示」。と書いてあります。

.flexslider .slides > li {
display: none;
}
.flexslider .slides > li:first-child {
display: block;
}

Seesaaのシステムは、無料でありながら自由度が高く気に入っています。スマホのHTML編集ができるともっといいんですけど・・・。

FlexSliderにはオプション設定がたくさん。

今回は３種類のスライダー見本投稿してみましたが、FlexSliderにはたくさんのオプションが用意されており、いろいろな表示ができます。

FlexSlider 2

次回はいつになるか未定ですが、このスライダーをヘッダーの背景にする方法を紹介します。

FlexSliderオプション一覧（2016.10.9）
翻訳はgoogleを元にしています。

namespace: "flex-", //{NEW} String: Prefix string attached to the class of every element generated by the plugin
// プラグインによって生成された要素の接頭辞。デフォルトは"flex-"。
selector: ".slides > li", //{NEW} Selector: Must match a simple pattern. '{container} > {slide}' -- Ignore pattern at your own peril
// '{コンテナ} > {スライド}'のようにスライド部分を指定できます。デフォルトは".slides > li"。
animation: "fade", //String: Select your animation type, "fade" or "slide"
//アニメーションの種類を選択「fade」または「slide」。デフォルトは"fade"。
easing: "swing", //{NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
// jQueryのイージングプラグインがサポートされています！デフォルトは"swing"。
direction: "horizontal", //String: Select the sliding direction, "horizontal" or "vertical"
// スライド方向を選択できます。「水平"horizontal"」または「垂直"vertical"」。デフォルトは"horizontal"。
reverse: false, //{NEW} Boolean: Reverse the animation direction
// アニメーションの方向を逆にできます。デフォルトは"false"。
animationLoop: true, //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
// アニメーションをループさせるかどうかを指定できます。デフォルトは"true"。
smoothHeight: false, //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode
// スライダーの高さが変わると、水平モードでスムーズにアニメーションします。デフォルトは"false"。
startAt: 0, //Integer: The slide that the slider should start on. Array notation (0 = first slide)
// どのスライドから開始するかを指定できます。（0 =最初のスライド）。デフォルトは0。
slideshow: true, //Boolean: Animate slider automatically
// スライダーを自動的にアニメーションさせます。デフォルトは"true"。
slideshowSpeed: 7000, //Integer: Set the speed of the slideshow cycling, in milliseconds
// ミリ秒単位で、スライドショーの停止時間を設定します。デフォルトは7000。
animationSpeed: 600, //Integer: Set the speed of animations, in milliseconds
// ミリ秒単位で、アニメーションの速度を設定します。デフォルトは600。
initDelay: 0, //{NEW} Integer: Set an initialization delay, in milliseconds
// ミリ秒単位で、初期化遅延時間を設定します。デフォルトは0。
randomize: false, //Boolean: Randomize slide order
// スライドの順序をランダムにします。デフォルトは"false"。

// Usability features //ユーザビリティ機能
pauseOnAction: true, //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
// 操作しているときスライドショーが一時停止します。デフォルトは"true"。
pauseOnHover: false, //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
// スライダの上にマウスを移動したときスライドショーを一時停止します。その後再開しません。デフォルトは"false"。
useCSS: true, //{NEW} Boolean: Slider will use CSS3 transitions if available
// 可能な場合、スライダーがCSS3のトランジションを使用します。デフォルトは"true"。
touch: true, //{NEW} Boolean: Allow touch swipe navigation of the slider on touch-enabled devices
// タッチ対応デバイスの場合、タッチスワイプナビゲーションを使用する。デフォルトは"true"。
video: false, //{NEW} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches
// スライダーでビデオを使用する場合は、グラフィカルな不具合を避け、CSS3 3D Transformsを防ぐことができます。デフォルトは"false"。

// Primary Controls //プライマリコントロール
controlNav: true, //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
// ページング制御のナビゲーションを表示しますか？ デフォルトは"true"。
directionNav: true, //Boolean: Create navigation for previous/next navigation? (true/false)
// 「前/次 "previous/next"」のナビゲーションを表示しますか？（true/false）で指定。デフォルトは"true"。
prevText: "Previous", //String: Set the text for the "previous" directionNav item
// 「前 "previous"」ナビゲーションのテキストを設定します。デフォルトは"Previous"。
nextText: "Next", //String: Set the text for the "next" directionNav item
// 「次 "next"」ナビゲーションのテキストを設定します。デフォルトは"next"。

// Secondary Navigation //セカンダリナビゲーション
keyboard: true, //Boolean: Allow slider navigating via keyboard left/right keys
// スライダーをキーボードの左右キーでナビゲートできるようにします。デフォルトは"true"。
multipleKeyboard: false, //{NEW} Boolean: Allow keyboard navigation to affect multiple sliders. Default behavior cuts out keyboard navigation with more than one slider present.
// キーボードで、複数のスライダを操作できるようにします。デフォルトは"false"。
mousewheel: false, //{UPDATED} Boolean: Requires jquery.mousewheel.js (https://github.com/brandonaaron/jquery-mousewheel) - Allows slider navigating via mousewheel
// マウスホイールを使用してスライダ操作できるようにします。jquery.mousewheel.js（https://github.com/brandonaaron/jquery-mousewheel）が必要です。デフォルトは"false"。
pausePlay: false, //Boolean: Create pause/play dynamic element
// 「再生／停止 "pause/play"」を表示するかどうか。デフォルトは"false"。
pauseText: 'Pause', //String: Set the text for the "pause" pausePlay item
// 「一時停止 "pause"」pausePlayボタンのテキストを設定します。デフォルトは"Pause"。
playText: 'Play', //String: Set the text for the "play" pausePlay item
//文字列：「プレイ "play"」pausePlayボタンのテキストを設定します。デフォルトは"play"。

// Special properties //特別なプロパティ
controlsContainer: "", //{UPDATED} Selector: USE CLASS SELECTOR. Declare which container the navigation elements should be appended too. Default container is the FlexSlider element. Example use would be ".flexslider-container". Property is ignored if given element is not found.
// クラスセレクタを使用する。デフォルトのコンテナはFlexSlider要素です。使用例「.flexslider-container」が見つからない場合はプロパティは無視されます。デフォルトは""。
manualControls: "", //Selector: Declare custom control navigation. Examples would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
// カスタムコントロールナビゲーション宣言。controlNav内の要素の数とslides/tabsの数と一致している必要があります。使用例".flex-control-nav li"または"#tabs-nav li img"。デフォルトは""。
sync: "", //{NEW} Selector: Mirror the actions performed on this slider with another slider. Use with care.
// ２つのスライダーを同期させるオプション。注意して使用してください。デフォルトは""。
asNavFor: "", //{NEW} Selector: Internal property exposed for turning the slider into a thumbnail navigation for another slider
// 別のスライダーのサムネイルナビゲーションを親スライダーと紐付けるときのオプション。デフォルトは""。

// Carousel Options //カルーセルオプション
itemWidth: 0, //{NEW} Integer: Box-model width of individual carousel items, including horizontal borders and padding.
// 水平ライン（borders）とパディング（padding）を含む個々のスライドの幅。デフォルトは0。
itemMargin: 0, //{NEW} Integer: Margin between carousel items.
// 個々のスライドのマージン。デフォルトは0。
minItems: 0, //{NEW} Integer: Minimum number of carousel items that should be visible. Items will resize fluidly when below this.
// 表示されているスライドの最小数。これより少ないときはサイズが変更されます。デフォルトは0。
maxItems: 0, //{NEW} Integer: Maxmimum number of carousel items that should be visible. Items will resize fluidly when above this limit.
// 表示されているスライドの最大数。これより多いときはサイズが変更されます。デフォルトは0。
move: 0, //{NEW} Integer: Number of carousel items that should move on animation. If 0, slider will move all visible items.
// １度にアニメーションするスライドの数。0の場合表示されているすべてのスライドが移動されます。デフォルトは0。

// Callback API //コールバックAPI
start: function(){}, //Callback: function(slider) - Fires when the slider loads the first slide
// 最初のスライドがロードされたときに発生するコールバック。
before: function(){}, //Callback: function(slider) - Fires asynchronously with each slider animation
// 各スライダが動くときに発生するコールバック。
after: function(){}, //Callback: function(slider) - Fires after each slider animation completes
// 各スライダが動き終わったときに発生するコールバック。
end: function(){}, //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
// スライダーが最後のスライドに達した時点で発生するコールバック。（非同期）
added: function(){}, //{NEW} Callback: function(slider) - Fires after a slide is added
// スライドが追加されたときに発生するコールバック。
removed: function(){} //{NEW} Callback: function(slider) - Fires after a slide is removed
// スライドが削除されたときに発生するコールバック。



この記事へのコメント

コメントを書く