scriptをwp_footerで読み取る形でwordpressにswiperを実装したけどスライダーが動きません。

前提・実現したいこと

wordpressにswiperを実装したくて
wp_footerにscriptを読み込ませたくてfuncthon.phpに記述して
動きとかを指定するjavascriptはwp_footerの上に入れました。(function.phpに書く方法がわからなくて)
でも動かなくて困ってます。chromeで見たらerror出てるし
どなたか解決法わかれば教えていただけるとありがたいです。

発生しているchromeのエラーメッセージ

(index):170 Uncaught TypeError: $ is not a function
    at (index):170
(anonymous) @ (index):170
DevTools failed to parse SourceMap: https://○○/wp/wp-content/themes/○○/js/swiper.min.js.map

該当のソースコード

function.phpで読み込んだscript

funtion
1<?php
2
3 // SwiperのCSS
4function my_styles() {
5  wp_enqueue_style( 'swiper', get_template_directory_uri() . '/js/swiper.min.css', array(), false, 'all');
6}
7add_action( 'wp_enqueue_scripts', 'my_styles');
8
9// SwiperのJavaScript
10function my_scripts() {
11  wp_enqueue_script( 'swiper', get_template_directory_uri() . '/js/swiper.min.js', array(), false, true );
12}
13add_action( 'wp_enqueue_scripts', 'my_scripts');

html部分

html
1<!-- HTML構造とclass名を守る-->
2<div class="swiper-container">
3    <div class="swiper-wrapper">
4 
5        <!-- 各スライド -->
6        <div class="swiper-slide">ここに入れたものがスライドする</div><!-- swiper-wrapper -->
7        <div class="swiper-slide">ここに入れたものがスライドする2</div><!-- swiper-wrapper -->
8        <div class="swiper-slide">ここに入れたものがスライドする3</div><!-- swiper-wrapper -->
9 
10    </div><!-- swiper-slide -->
11 
12        <div class="swiper-pagination"></div>
13        <div class="swiper-button-prev"></div>
14        <div class="swiper-button-next"></div>
15 
16</div><!-- swiper-container -->

動きの指定javascript

javascript
1<script>
2//swiper.js
3//jQuery使ってます..
4$(document).ready(function () {
5  // swiperをイニシャライズ
6  var swiper = new Swiper('.swiper-container', {
7  slidesPerView: 3,
8  spaceBetween: 20,
9  pagination: '.swiper-pagination',
10  paginationClickable: true,
11  nextButton: '.swiper-button-next',
12  prevButton: '.swiper-button-prev',
13  loop: true,
14    })
15});
16</script>
17<?php wp_footer(); ?>
18</body>