Vegas Background SlideShow | jQuery Responsive

基本的な使い方
jQueryとvegas.min.jsを読み込みます。

cssも読み込みます。

html

基本的なスクリプトを実行します。

$(function(){
  $('#example, body').vegas({
    slides: [
     { src: 'img/slide1.jpg' },
     { src: 'img/slide2.jpg' },
     { src: 'img/slide3.jpg' },
     { src: 'img/slide4.jpg' }
    ]
  });
});

これで背景にスライドショーを流すことができます。

オプション

様々なオプションが用意されています。

例えば、「delay」ではスライドショーの間隔をミリ秒単位で指定できます、「timer」をfalseにすると画像の下に表示されるバーが非表示になります、「overlay」で背景画像に重ねるオーバーレイ画像を指定できます、「transition」でスライドの切り替え動作を指定できます。

$(function(){
  $('#example, body').vegas({
    slides: [
      { src: 'img/slide1.jpg' },
      { src: 'img/slide2.jpg' },
      { src: 'img/slide3.jpg' },
      { src: 'img/slide4.jpg' }
    ],
    delay: 7000,
    timer: false,
    overlay: 'js/vegas/overlays/01.png',
    transition: 'fade2',
  });
});

アニメーション

アニメーションをつけることも可能です。

animation: 'kenburnsLeft' のように指定します。

$(function(){
  $('#example, body').vegas({
    slides: [
      { src: 'img/slide1.jpg' },
      { src: 'img/slide2.jpg' },
      { src: 'img/slide3.jpg' },
      { src: 'img/slide4.jpg' }
    ],
    delay: 7000,
    timer: false,
    overlay: 'js/vegas/overlays/01.png',
    animation: 'kenburnsLeft'
  });
});