ゆっくりズームアウトさせながら全画面で見せたい

前提・実現したいこと

Vegas Background SlideShow というスライドショーを表示するJavaScript ライブラリを使い、HTML 内の<div>（今回は<div id=”slider”></div>）に背景画像を指定してスライドさせ、JavaScriptの中で、PCの画像とタブレット以下の画像を変更する仕組みを作っています。
jQueryを読み込まず、動作しません。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5	<meta charset="UTF-8">
6	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
7	<meta name="format-detection" content="telephone=no,address=no,email=no">
8	<meta id="viewport" name="viewport"
9		content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
10	<meta name="description" content="サイトの説明、概要">
11	<link rel="stylesheet" type="text/css" href="./css/vendor.css">
12	<link rel="stylesheet" type="text/css" href="./css/sanitize.css">
13	<link rel="stylesheet" type="text/css" href="./style.css">
14	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.4/vegas.min.css">
15	<link rel="stylesheet" href="https://use.typekit.net/qlj8haw.css">
16	<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
17	<script src="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.4/vegas.min.js"></script>
18	<script src="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/6-1-3/js/6-1-3.js"></script>
19	<script src="./js/vendor.js"></script>
20	<script src="./js/script.js"></script>
21	<script src="./js/jquery.matchHeight.js"></script>
22	<title></title>
23</head>
24
25<body>
26	<header id="header">
27		<div class="header">
28			<div class="full">
29				<div id="slider"></div>
30				<div class="inner">
31					<ul>
32						<li>
33							<div class="header-logo">
34								<h1><a href="index.html"><img src="img/header_logo.jpg" width="252" height="50"
35											alt=""></a></h1>
36							</div>
37						</li>
38					</ul>
39				</div>>
40				<div class="wrap">
41					<h3>テキストが入ります</h3>
42					<p>テキストが入ります</p>
43				</div>
44			</div>
45		</div>
46	</header>
47</body>
48
49</html>

css
1#slider {
2  width: 100%;
3  height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
4}

javascript
1//画像の設定
2
3var windowwidth = window.innerWidth || document.documentElement.clientWidth || 0;
4    if (windowwidth > 768){
5      var responsiveImage = [//PC用の画像
6        { src: './img/top_img01.jpg'},
7        { src: './img/top_img02.jpg},
8        { src: './img/top_img03.jpg}
9      ];
10    } else {
11      var responsiveImage = [//タブレットサイズ（768px）以下用の画像
12        { src: 'https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/6-1-3/img/img_sp_01.jpg' },
13        { src: 'https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/6-1-3/img/img_sp_02.jpg' },
14        { src: 'https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/6-1-3/img/img_sp_03.jpg' }
15      ];
16    }
17
18//Vegas全体の設定
19
20$('#slider').vegas({
21    overlay: true,//画像の上に網線やドットのオーバーレイパターン画像を指定。
22    transition: 'blur',//切り替わりのアニメーション。http://vegas.jaysalvat.com/documentation/transitions/参照。fade、fade2、slideLeft、slideLeft2、slideRight、slideRight2、slideUp、slideUp2、slideDown、slideDown2、zoomIn、zoomIn2、zoomOut、zoomOut2、swirlLeft、swirlLeft2、swirlRight、swirlRight2、burnburn2、blurblur2、flash、flash2が設定可能。
23    transitionDuration: 2000,//切り替わりのアニメーション時間をミリ秒単位で設定
24    delay: 10000,//スライド間の遅延をミリ秒単位で。
25    animationDuration: 20000,//スライドアニメーション時間をミリ秒単位で設定
26    animation: 'kenburns',//スライドアニメーションの種類。http://vegas.jaysalvat.com/documentation/transitions/参照。kenburns、kenburnsUp、kenburnsDown、kenburnsRight、kenburnsLeft、kenburnsUpLeft、kenburnsUpRight、kenburnsDownLeft、kenburnsDownRight、randomが設定可能。
27    slides: responsiveImage,//画像設定を読む
28  });