カルーセルの横幅を変更できない (Slick.js)

slick.jsを用いてカルーセルを導入しております。
slickのスライダーの幅が狭まらず困っております。

画像の通り、スライダーの幅が横100vwの様になってしまい、親要素の幅を変更してもスライダー自体の幅が変わりません。

実現させたいこと

スライダーを60%にし、画面幅が変化しても横縦比(9:6)が変わらないまま縮小させる。

発生している問題

親要素にwidthを指定しても影響しない。

###試したこと

・該当するすべての要素にwidth: 900pxを指定
・リセットcssを削除
・.slideにwidth=900px, height=600pxをcssで指定
・また、以下の様のにも同様の指定をしても影響なし

該当のソースコード

上部でswiperを使用しておりますが、今回のスライダーはslickを使用しております。
影響がないかと思いますが、念の為swiperのlinkとscriptを記載いたします。

html
1
2<head>
3  <link rel="stylesheet" href="/stylesheets/slick.css">
4  <link rel="stylesheet" href="/stylesheets/slick-theme.css">
5  <link rel="stylesheet" href="/stylesheets/style.css">
6  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css">
7</head>
8
9<body>
10 <ul class="slider">
11        <div class="item">
12          <img src="/img/photo_1.jpg" alt="">
13          <p class="text">テキスト</p>
14        </div>
15        <div class="item">
16          <img src="/img/photo_2.jpg" alt="">
17          <p class="text">テキスト</p>
18        </div>
19      </ul>
20
21 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
22  <script src="/js/script.js"></script>
23  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
24  <script type="text/javascript" src="js/slick.min.js"></script>
25  <script src="https://cdn.jsdelivr.net/npm/jquery-scrollify@1.0.20/jquery.scrollify.min.js"></script>
26</body>
27

SCSS
1    .slick-track{
2      max-width: 900px;
3    }
4    .slider{
5      max-width: 900px;
6      margin-left: 0;
7      margin-right: 0;
8      .item{
9        max-width: 900px;
10        margin-left: 0;
11        margin-right: 0;
12        img{
13          padding:0;
14          margin: 0;
15        }
16      }
17    }

JS
1$(function(){
2
3  $('.slider').slick({
4      slidesToShow: 1,
5      centerMode: true, 
6      arrows: true,
7      variableWidth: false
8    });
9  
10});