VEGAS BACKGROUND SLIDESHOWの使い方

 

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