Swiperでスライドショーを作成しようとしていますが、スライドしなくて困っています。

前提・実現したいこと

Swiperでスライドショーを実装しようとしていますが、スライドしない状態で困っています。エラーメッセージは特に表示されていません。
CDNからSwiperを使おうとしています。

該当のソースコード

html
1<head>
2    <meta charset="utf-8">
3    <title></title>
4    <meta name="description" content="">
5    <meta name="viewport" content="width=device-width, initial-scale=1">
6    <link rel="shortcut icon" href="img/favicon.ico">
7    <link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css"/>
8    <link rel="stylesheet" href="css/style.css">
9   
10    <script src="js/jquery-3.6.0.min.js"></script>
11    <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
12    
13    <script src="js/script.js"></script>
14    
15  
16 </head>
17

javascript
1
2$(function() { 
3
4$('.open').css('display', 'block');
5
6$('.qestion-answer-list-item').click(function() {
7 var $answer = $(this).find('.answer');
8
9 if($answer.hasClass('open')) {
10    $answer.removeClass('open');
11    $answer.slideUp();
12 } else {
13    $answer.addClass('open');
14    $answer.slideDown()
15 }
16});
17});
18
19const swiper = new Swiper('.swiper', {
20   // Optional parameters
21   direction: 'vertical',
22   loop: true,
23 
24   // If we need pagination
25   pagination: {
26     el: '.swiper-pagination',
27   },
28 
29   // Navigation arrows
30   navigation: {
31     nextEl: '.swiper-button-next',
32     prevEl: '.swiper-button-prev',
33   },
34 
35   // And if we need scrollbar
36   scrollbar: {
37     el: '.swiper-scrollbar',
38   },
39 });
40