VEGAS BACKGROUND SLIDESHOWの使い方
投稿日：2017年11月8日 更新日：
VEGAS BACKGROUND SLIDESHOWの使い方
画像だけを利用した基本的な使い方
独自で作成したjsファイルがあるならそちらに以下のコードを記述してからサーバーにアップしてください。
なければ、テーマヘッダー（header.php）に以下のコードを記述してください。
その場合は、<script>以下のコード</script>のようにしてください。
jQuery(document).ready(function(){
jQuery('.top-img').vegas({ //.top-imgのクラス名は自分の好きな覚えやすいのでOKです
delay: 7000,
timer: false,
shuffle: true,
firstTransition: 'fade',
firstTransitionDuration: 5000,
transition: 'slideDown2',
transitionDuration: 2000,
slides: [
{ src: <span class="syntax-string">'/img/slide1.jpg'</span> },
{ src: <span class="syntax-string">'/img/slide2.jpg'</span> },
{ src: <span class="syntax-string">'/img/slide3.jpg'</span> },
{ src: <span class="syntax-string">'/img/slide4.jpg'</span> }
]
});
});
htmlでの書き方は、
表示したいところに、
<div class="top-img"></div> <!-- .top-imgのクラス名は自分の好きな覚えやすいのでOKです。ただし上記と同じにしてください。 -->
を記述してください。
自分なりに若干変更したのは以下の通りです。
jQuery(document).ready(function(){
jQuery('.top-img').vegas({
overlay: 'https://○○○.com/wp-content/themes/△△△/images/overlays/04.png',
transition: 'fade',
transitionDuration: 4000,
delay: 10000,
animation: 'random',
animationDuration: 20000,
timer: false,
slides: [
{ src: 'https://○○○.com/wp-content/themes/△△△/images/□□1.jpg' },
{ src: 'https://○○○.com/wp-content/themes/△△△/images/□□2.jpg' },
{ src: 'https://○○○.com/wp-content/themes/△△△/images/□□3.jpg' }
]
});
});
公式サイトには設定方法がいろいろあるので試してみてください。
動画も一緒に表示させる方法
前回の記事はこちら→WordPressで画像をかっこよく見せるVEGAS
関連記事
-
-
cssだけで簡単にメニューなどのリストに動きを付けます。 今回は、右から現れてくるように作ってみました。 さっそくですが、以下にサンプルがありますので、興味がある方はコピペして使ってくだ …
-
-
display: flexでレスポンシブにも対応させた PCとスマホで見せ方を変えたかったので、cssで調整 PCでは横4列、スマホでは横2列で表示 通常の表が横に２つ並んでいるようなも …
-
-
WordPress テーマTwenty Sixteenでメンバー紹介や選手一覧などを作ってみた③
9.メンバー登録 上図のような画面になって、投稿ができるようになります。 では、さっそく1人目を登録します。 ①「ここにタイトルを入力」のところに「日本 太郎」としてみます。 ②アイキャッチ画像のとこ …
-
-
画像を順番に重ねて表示したい。 画像を遅らせて表示したい。 画像に動きをつけたい。 今回は、WordPressでトップページ（フロントページ）のみ、動きのある画像を表示した …
-
-
便利で何かと使いやすいかな？って思いますので、とりあえずやってみました。 固定ページを書いているときに、別のテンプレートファイル（phpファイル）を読み込みたいときに、直接書くのはやめた方が良いので、 …
- PREV
- WordPressで画像をかっこよく見せるVEGAS
- NEXT
- 画像と動画を混合させて表示VEGAS
