Функция .owlCarousel () не разрешается как функция

Question

Я хочу использовать owl carousel, и я добавил соответствующие файлы в свой индексный файл. php, но функция .owlCarousel () по-прежнему не разрешается. Вот мои связанные ссылки на сову карусели в заголовке моего HTML файла:

<link rel="stylesheet" href="css/jquery-ui.css">
<!-- owl carousel external css files: -->
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" href="css/jquery.fancybox.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" rel="stylesheet" />

И в конце тега body я включаю мои js файлы:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" defer></script>
<script src="js/jquery-3.3.1.min.js" type="c4ab72ba033bc5e53971138c-text/javascript" defer></script>


<script src="js/jquery-migrate-3.0.1.min.js" type="c4ab72ba033bc5e53971138c-text/javascript" defer></script>
<script src="js/jquery-ui.js" type="c4ab72ba033bc5e53971138c-text/javascript" defer></script>
<script src="js/popper.min.js" type="c4ab72ba033bc5e53971138c-text/javascript" defer></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" defer></script>

<script src="js/owl.carousel.min.js" type="c4ab72ba033bc5e53971138c-text/javascript" defer></script>

<!-- My script file -->
<script src="js/owl-carousel-custom.js" type="text/javascript" defer></script>

и по моему обычаю совы-карусели. js Я пытаюсь написать код совы-карусели совы:

$(document).ready(() => {

  $('.owl-carousel').owlCarousel({
    loop: true,

  })

});

Но .owlCarousel () не разрешается как функция. Почему? Вот скриншот моей IDE: