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

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

関連記事

ワードプレス

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

  WordPressでスポーツチームやサークルまたは、企業やショップなどの人物紹介などのページを作るときに行う方法として、Web製作者それぞれやり方はあると思いますが、独学で学んだ私が作っ …

予約1

MTS Simple Booking-Cで指定した日の指定した時間だけ受け付けないようにする

  この日のこの時間だけ受け付けないようにしたい   無料版の予約システム【MTS Simple Booking-C】はすごく簡単に予約可能なプラグインですが、 ある程度決まったス …

一人暮らしwifi

子供の一人暮らしにインターネット

  昔はむかし、今はいま。 当たり前になっているインターネット環境ですが、 自宅でのネット環境は整っている家庭も多いと思います。 では、一人暮らしを始めた子供の部屋のネット環境はどうすればよ …

ドロップレット通信エラー

ドロップレットとフォトショップが通信できませんとエラーが出た場合の解決

  簡単にできる確認して欲しい項目   1.ドロップレットのプロパティを変更 保存してできた左のアイコンがあると思います。 こちらのアイコンを左クリックしてプロパティを開きます。 …

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

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

  前回の記事では、『メニューリストを横から順番に表示させる cssのみ』ということで、 cssだけで動きのあるメニューを作成しました。   今回は、jsファイルに書き込んで同じよ …

PREV
WordPressで画像をかっこよく見せるVEGAS
NEXT
画像と動画を混合させて表示VEGAS