Q&A
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"/></head> 自分で作ったindex.jsファイル $(function() { $('.slick').slick( { dots: true, // autoplay:true, }); }); これで表示をしようとすると右上にとても小さく画像が表示されてcssから画像の変更ができません。なぜなんでしょうか？ドットなどは中央に表示されており、autoplay:trueにすると画像は小さいながら動いているのでslickの適用はされていると思います。<%= 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>
あなたの回答
tips
プレビュー
