【Rails5】slickのレイアウトがTurbolinksの影響で崩れる

こんにちは、マリンです。

2021年一発目はSlickです。

業務で使用したところ、

Turbolinksの影響で初回読み込み時にスライド全体が右に寄ってしまう。

という現象が起きていたので解消した方法を残しておきます。

環境

• Rails5

• jquery-slick-rails

jquery-slick-railsというgemを使用していますが、

これを入れる前に本家からダウンロード版入れて実装していました。

この時にも同じ現象が起きていたのでツールのせいではないと思われます。

状況

silickの設定でcenterMode: trueにしたところ、

ページの初回読み込み時（正確にはcookieにログが残っていない時）に、

スライド画像が全体的に右に寄ってしまう。というものです。


centerModeではない時にはきちんと表示されるので、

なぜこの時だけなのかはすみませんがわかりません。

もしわかる方いらっしゃいましたらぜひ教えてください。


色々調べた結果、Turbolinksが関係しているとわかりました。

対処法

まず最初に解決した方法を記述します。

対象ページをTurbolinksを使用しないようにします。

<%= link_to url, data: { 'turbolinks': false } %>

今回は対象ページに飛ぶリンクに対してdata-turbolinks="false"をつけて、

そのページだけTurblinksをオフにします。

link_toに直接属性を追加していますが、

リンクを囲むdivタグを設置してこちらに属性を追加しても良いようです。


Turbolinksとは相性が悪そうですね。

Railsで使用する時には対策打っておいた方が良さそうです。

その他の試した方法

• require turbolinksを削除する

これは本当にTurbolinksのせいなのかを確認した時に使った方法です。

基本的にはこちらはやらない方が良いでしょう。

• turbolinks: loadを使う

$(document).on('turbolinks: load', () => {
    $('#selector').slick({
        centerMode: true
    });
})

これは基本だと思うんですが、

今回はこれをやってもダメでした。

書き方が間違ってたのかな. . .??

まとめ

jQueryとTurbolinksってこういうことちょいちょいありますよね。

私は今回で２回目なんですが、前回は訳もわからず上司に言われた通りに対処しました。

今回はもう少し自分で理解して対処できたんで良かったかなと。

ただ詳しい仕組みについては未だよくわかっていないので、

この辺りもちゃんと勉強したいなと思っています。


今回参考にさせて頂いた記事はこちらです。

qiita.com

ありがとうございました。