railsでslickを使ったら画像がとても小さく表示され変更できない

index.html.erbファイル

<div class="contents"> <div class="slick"> <%= image_tag '1.jpg' %> <%= image_tag '2.jpg' %> <%= image_tag '3.jpg'%> </div> </div> application.htmlファイルのheadタグ内 <!DOCTYPE html> <html> <head> <title>UnireviApp</title> <%= csrf_meta_tags %> <%= csp_meta_tag %> <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>

<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
 <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

</head> 自分で作ったindex.jsファイル $(function() { $('.slick').slick( { dots: true, // autoplay:true, }); }); これで表示をしようとすると右上にとても小さく画像が表示されてcssから画像の変更ができません。なぜなんでしょうか？ドットなどは中央に表示されており、autoplay:trueにすると画像は小さいながら動いているのでslickの適用はされていると思います。