slickでスマホサイズにしたときに動かない

前提・実現したいこと

slickを用いてレスポンシブのスライダーを作ろうとしています。

発生している問題・エラーメッセージ

PCでの表示は問題なくできて、PCサイズからスマホサイズに縮めたときは実現したい動作になります。
しかし、スマホサイズにしてから更新を行うと、スライダーが解除され画像が縦に並ぶだけになってしまいます。

該当のソースコード

html
1<head>
2<link rel="stylesheet" type="text/css" href=".../css/slick.css"/>
3<link rel="stylesheet" href=".../css/slick-theme.css">
4</head>
5
6<body>
7<div class="content">
8    <ul class="slider mypattern">
9        <li><a href="#"><img src="image1.png"></a></li>
10        <li><a href="#"><img src="image2.png"></a></li>
11        <li><a href="#"><img src="image3.png"></a></li>
12        <li><a href="#"><img src="image4.png"></a></li>
13  </ul>
14</div>
15<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
16<script src=".../js/slick.min.js" type="text/javascript"></script>
17</body>

Javascript
1$("document").ready(function(){
2  $('.mypattern').slick({
3    autoplay: true,
4    autoplaySpeed: 2500,
5    speed: 800,
6    dots: true,
7    arrows: false,
8    centerMode: true,
9    centerPadding: '20%',
10    responsive: [ //レスポンシブの設定
11      {
12        breakpoint: 761, //ブレークポイント1の値
13          settings: { //ブレークポイント1のオプション
14            slidesToShow: 1,
15            slidesToScroll: 1,
16            infinite: true,
17            dots: true,
18            centerPadding: '0%'
19          }
20      }]
21  });
22});

css
1.mypattern {
2    width: 100%;
3    margin: 0 auto 80px;
4  }
5  .slick-slide img {
6    width: 100%;
7    height: auto;
8  }
9  .mypattern{
10    width: 100%;
11  }
12  .mypattern .slick-slide{
13    margin: 5px;
14  }
15
16.mypattern .slick-slide:not(.slick-center) {
17  -webkit-filter: opacity(20%);
18  -moz-filter: opacity(20%);
19  -o-filter: opacity(20%);
20  -ms-filter: opacity(20%);
21  filter: opacity(20%);
22  transition: 0.2s linear;
23}
24
25@media screen and (min-width:961px){
26    .content{
27        width:1260px;
28        margin-left:-132px;
29        margin-right:-132px;
30        margin-bottom:75px;
31    }
32    
33    .slick-track{
34        margin-bottom:25px;
35    }
36    .slick-dots li{
37        padding:0px 25px 0px 25px !important;
38    }
39}