ブラウザ全体の画像をスライドさせるjQuery「vegas2」

2019年10月4日

背景画像をスライドさせたい

浦島です。今回は背景画像をスライドさせるjQueryのプラグイン
「vegas2」を紹介します。

まずは公式サイトででも画面をご確認ください。

vegas2　公式サイトへ

必要なファイルをダウンロードしよう

githubから必要なファイルをダウンロードしましょう。
ダウンロードしたフォルダを解凍しましょう。
今回必要なファイルは（vegas.min.js）,(vegas.min.css)の二つです。

画像を３枚用意しましょう。
画像（jpg）に1,2,3という名前をつけました。

jqueryとvegasのコードを書いていこう

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="vegas.min.css" />
    <script script type="text/javascript" src="vegas.min.js"></script>

このコードをhead内に書いていこう。

htmlを書く

<div id="vegas">
        <h1>vegas デモ画面</h1>
    </div>

<h1>vegas デモ画面</h1>

</div>

これは別に書く必要がありません。

javascriptを書いていこう

<script>
        $(function () {
            $('body').vegas({
                slides: [
                    { src: '1.jpg' },
                    { src: '2.jpg' },
                    { src: '3.jpg' }
                ]
            });
        });
    </script>

$(function () {

$('body').vegas({

slides: [

{ src: '1.jpg' },

{ src: '2.jpg' },

{ src: '3.jpg' }

]

});

</script>

body内に書いてください。

最終的なコードはこちら

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vegas2</title>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="vegas.min.css" />
    <script script type="text/javascript" src="vegas.min.js"></script>


    <style>
        h1 {
            position: absolute;
            top: 50%;
            left: 50%;
            color: white;
            font-size: 50px;

        }
    </style>
</head>

<body>
    <div id="vegas">
        <h1>vegas デモ画面</h1>
    </div>
</body>
</head>

<body>
    <script>
        $(function () {
            $('body').vegas({
                slides: [
                    { src: '1.jpg' },
                    { src: '2.jpg' },
                    { src: '3.jpg' }
                ]
            });
        });
    </script>
</body>

</html>