Flickityプラグインを使いたいがF5更新しないと作動しない

Question

rails5.2です。

スライダーの「Flickity」を使うべくファイルをダウンロードし以下のように配置しました。

js
/vendor/assets/javascripts/flickity.pkgd.min.js

css
/vendor/assets/stylesheets/flickity.css

そして以下のようにしました。

/app/assets/javascripts/application.js

//= require jquery
//= require rails-ujs
//= require bootstrap
//= require turbolinks
//= require jquery.raty.js
//= require_tree ../../../vendor/assets/javascripts/.
//= require_tree .

/app/assets/stylesheets/application.css

 *= require font-awesome
 *= require_tree .
 *= require_self
 *= require_tree ../../../vendor/assets/stylesheets/.

view

    <% if @item.images.present? %>
      <ul class="js-flickity">
        <% @item.images.each do |image| %>
          <li class="gallery-cell"><%= image_tag(image.src.to_s) %></li>
        <% end %>
      </ul>
    <% end %>

出力されるHTML

      <ul class="js-flickity">
          <li class="gallery-cell"><img src="/uploads/image/src/1/IMG20200902141212.jpg" /></li>
          <li class="gallery-cell"><img src="/uploads/image/src/2/IMG20200902141226.jpg" /></li>
          <li class="gallery-cell"><img src="/uploads/image/src/3/IMG20200904134414.jpg" /></li>
      </ul>

これでページにアクセスすると初回表示時はスライドが作動せず、F5更新するとスライドが作動します。
※ちなみにconsoleにエラーは何も出てません

requireの位置を色々変えて試しましたが状況変わりません。

何が原因でしょうか？

分かる方教えて下さい。宜しくお願い致します。

Answer 1

Flickityをイニシャライズする必要がありそうです。

参考：https://stackoverflow.com/questions/61494359/how-do-i-initialize-flickity-with-html-in-turbolinks

Comments

[pecchan]

有難う御座います。

参考先すでに読んでおりましたが、参考先でも解決していないように見受けられました。

Flickityのイニシャライズについて調べてみます。

[pecchan]

スライダープラグイン、他にも色々あるんですね。
手軽に進めたいので他のに変更しようと思います。
有難う御座いました。

[no1knows]

すいません。きちんと読み込んでいませんでした。

はい、スライダーはたくさんあります。。。が、一度下記を試してみてからでも良いかもしれません。
Rails6での実装ですが、application.jsに記載すれば良いはずです。
https://stackoverflow.com/questions/60160393/rails-6-webpacker-attempting-to-install-jquery-and-js-library
※コメントでjquery-bridgetは必要ないとも記載がありましたので、シンプルに実装できそうです。

[pecchan]

とんでもないです。

有難う御座います。
こちらの環境は5.2ですが試してみました。

２通りのいずれも application.jsを用意してますが、
先頭の
require("@rails/ujs").start()やrequire("jquery")など
requireでエラー（Uncaught ReferenceError）になって試してみる以前で躓きました。

エラーメッセージでググってますが解決でき無さそうです。
せっかく教えていただいたのに申し訳ございません。