Swiper Demos↓
http://www.idangero.us/swiper/demos/
参考サイト↓
1. Swiperという軽量でレスポンシブ対応でスワイプ切り替えもできちゃうスライダー
2013/08/09の記事だけど…。
2. Swiperプラグイン【日本語訳 】スワイプ対応のjavascriptスライダー
3. スワイプでスライドするタッチスライダーを実装する「Swiper」
以下実戦
1.function.phpにショートコードを作成
/**
* アイキャッチを一覧を表示するためのショートコード
*/
function _s_shortcode_swiper() {
$count = 0;
$slide = ”;
$output = ”;
/* お知らせのカテゴリより20件を取得するループ */
$myposts = get_posts( array( ‘category_name’ => ‘blog’, ‘posts_per_page’ => 20 ) );
foreach( $myposts as $mypost ) {
if ( has_post_thumbnail( $mypost->ID ) ) { /* アイキャッチがあるか？ */
$permalink = get_permalink( $mypost->ID ); /* パーマリンクを取得 */
$thumbnail = get_the_post_thumbnail( $mypost->ID, ‘thumbnail’ ); /* アイキャッチを取得 */
$slide .= <<<EOD
EOD;
$count++; /* カウント */
}
}
/* アイキャッチを1件以上取得した場合、iDangero.us Swiperに合わせたHTMLを生成 */
if ( 0 < $count ) {
$max = 170 * $count; /* (アイキャッチの幅 + 余白) xアイキャッチ数を計算 */
$output = <<<EOD
EOD;
}
return $output; /* 生成したHTMLを「リターン」 */
}
add_shortcode( ‘_s_swiper’, ‘_s_shortcode_swiper’ );
2.function.phpで作成したショートコード
_s_swiper
を以下に挿入
[_s_swiper]
3.http://www.idangero.us/sliders/swiper/から
Dawnload Swiper onGitHubボタンを押して、DL。
解凍して
idangerous.swiper.min.jsを
Aseets/jis/vendorに設置