質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.61%

Railsでslickを使ったスライダーを導入したいです。

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 67

score 3

前提・実現したいこと

RailsでSNSアプリケーションを作成しており、画像複数投稿機能を実装し、複数画像をスライダーで
表示しようと思い、実装したところ以下のようなエラーが発生してしまいました。

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

jQuery.Deferred exception: $(...).slick is not a function TypeError: $(...).slick is not a function
at HTMLDocument.<anonymous> (http://localhost:3000/packs/js/application-48c9f9321d611df49141.js:152:21)
    at mightThrow (http://localhost:3000/packs/js/application-48c9f9321d611df49141.js:18327:36)
    at process (http://localhost:3000/packs/js/application-48c9f9321d611df49141.js:18366:19) undefined
Uncaught TypeError: $(...).slick is not a function
at HTMLDocument.<anonymous> (application.js:15)
at mightThrow (deferred.js:95)
at process (deferred.js:134)

該当のソースコード

//= require jquery
//= require jquery_ujs
require("@rails/ujs").start()
require("@rails/activestorage").start()
import "channels";
import '../preview';
import '../slick.min'
require('jquery')

$(function() {
  $('.show-images').slick({
      dots: true,
  });
});
  <head>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
  </head>
<div class ="show-images">
  <% post.images.each do |image| %>
    <li class="slider"><%= image_tag image.variant(resize: '300x300') , class: 'post-image' %></li>
  <% end %>
</div>

試したこと

他の質問やQiitaなどを参考に修正をしようとしましたが、改善されません。。。
どこを直したら良いか教えていただきたいです。
初歩的な質問ですいません。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • neko_daisuki

    2021/09/15 11:42

    application.js に slick というのが見当たりませんが、以下の記事は参考になりませんか
    https://teratail.com/questions/225826

    キャンセル

  • naoki1128

    2021/09/15 11:53

    application.js にimport '../slick.min'を追記しましたが、エラーが解消されません。
    他に何か思い当たる点があればご教授いただきたいです。

    キャンセル

  • neko_daisuki

    2021/09/15 12:13

    この slick.min は import できる形式のものなのか疑問ですが、
    require('jquery') のあとに import '../slick.min' を書いてみるとかでしょうか

    キャンセル

  • naoki1128

    2021/09/15 14:11

    エラー解消できました!ありがとうございました!

    キャンセル

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る