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

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

関連記事

一人暮らしwifi

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

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

無料

無料のホームページ

さて、自分のホームページでも作ろうかな?って考えている方へ必見! ホームページを作るには、無料のサービスを提供しているサイトもたくさんあります。 有名どころでいえば、 Ameba(アメーバ) Jimd …

cssのcolumnでフロントページにランダム表示

CSSのcolumnでフロントページにランダム表示

  トップページに投稿記事をランダムに表示   通常トップページに表示するのは、 ・固定ページ ・投稿記事 のどちらかが多いと思いますが、 今回は投稿記事の新着順ではなく、ランダム …

wordpressテーマ

WordPress無料有料【LIQUID PRESS】子テーマを作ろう

  プロが選ぶWordPressテーマテンプレート【LIQUID PRESS】   レスポンシブWordPressテーマ 「LIQUID PRESS」 累計2千DL突破! 日本語対 …

メニュー横並びいっぱい

メニューを横並びで中央に配置して、両端を伸ばす

メニューを横並びで中央に配置して、両端を伸ばす 基本 HTML <div class="menu"> <div class="menu-inner&qu …