owl carsoulについて

owl carouselが反映されません。
どこが間違っているのか、教えていただけませんか？

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="UTF-8">
5        <title>Owl Carousel動作確認</title>
6        
7        <link rel="stylesheet"　　　　href="owlcarousel/assets/owl.carousel.min.css">
8        <link rel="stylesheet" href="owlcarousel/assets/owl.theme.default.min.css">
9        
10        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
11        
12        <script src="owlcarousel/owl.carousel.min.js"></script>
13        
14        
15        <script src="test-carousel.js"></script>
16    </head>
17    <body>
18        <div class="owl-carousel owl-theme">
19            <div> Your Content </div>
20            <div> Your Content </div>
21            <div> Your Content </div>
22            <div> Your Content </div>
23            <div> Your Content </div>
24            <div> Your Content </div>
25            <div> Your Content </div>
26        </div>
27    </body>
28</html>
29
30```js
31$(document).ready(function(){
32    $(".owl-carousel").owlCarousel();
33});

kei344

2020/04/26 00:51

エラーは出ていませんか？デベロッパーツールで確認してみてください。https://eng-entrance.com/javascript-display-error

行動規範の内容に同意します

回答1件

こんにちは、jQueryの対応ヴァージョンが1.8.3からということなので、jQueryのヴァージョンを上げれば良いのではないでしょうか？
一応ローカルで動きましたのでコードを載せておきます。

jQuery
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="UTF-8" />
5        <title>Owl Carousel動作確認</title>
6
7        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
8        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" />
9
10        <script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
11        <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
12        <script>
13            $(document).ready(function () {
14                $(".owl-carousel").owlCarousel();
15            });
16        </script>
17    </head>
18    <body>
19        <div class="owl-carousel owl-theme">
20            <div>Your Content</div>
21            <div>Your Content</div>
22            <div>Your Content</div>
23            <div>Your Content</div>
24            <div>Your Content</div>
25            <div>Your Content</div>
26            <div>Your Content</div>
27        </div>
28    </body>
29</html>
30