Web全般 wordpress

VEGAS BACKGROUND SLIDESHOWの使い方

投稿日:2017年11月8日 更新日:

vegas使い方

 

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

 



 

-Web全般, wordpress
-, , ,


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

リストメニューを順番に表示

メニューリストを横から順番に表示させる cssのみ

  cssだけで簡単にメニューなどのリストに動きを付けます。 今回は、右から現れてくるように作ってみました。 さっそくですが、以下にサンプルがありますので、興味がある方はコピペして使ってくだ …

divでtableを作ってみた

divでtableを作ってみた(レスポンシブ対応)

  display: flexでレスポンシブにも対応させた PCとスマホで見せ方を変えたかったので、cssで調整 PCでは横4列、スマホでは横2列で表示 通常の表が横に2つ並んでいるようなも …

ワードプレス

WordPress テーマTwenty Sixteenでメンバー紹介や選手一覧などを作ってみた③

9.メンバー登録 上図のような画面になって、投稿ができるようになります。 では、さっそく1人目を登録します。 ①「ここにタイトルを入力」のところに「日本 太郎」としてみます。 ②アイキャッチ画像のとこ …

画像を順番に表示

画像を順番に重ねて表示

  画像を順番に重ねて表示したい。 画像を遅らせて表示したい。 画像に動きをつけたい。   今回は、WordPressでトップページ(フロントページ)のみ、動きのある画像を表示した …

ショートコード

ショートコードでPHPファイルを読み込む

便利で何かと使いやすいかな?って思いますので、とりあえずやってみました。 固定ページを書いているときに、別のテンプレートファイル(phpファイル)を読み込みたいときに、直接書くのはやめた方が良いので、 …