More than 3 years have passed since last update.

RailsでSlick使ったらTurbolinksで競合した。

Posted at 2021-01-11

Slickを業務で使用したところ、
Turbolinksの影響で初回読み込み時にスライド全体が右に寄ってしまう。
という現象が起きていたので解消した方法を残しておきます。

環境

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で使用する時には対策打っておいた方が良さそうです。

これは本当にTurbolinksのせいなのかを確認した時に使った方法です。
基本的にはこちらはやらない方が良いでしょう。

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

これは基本だと思うんですが、
今回はこれをやってもダメでした。
書き方が間違ってたのかな. . .??
こういうとこちゃんとわかってないないところに勉強不足を感じます。

今回参考にさせて頂いた記事はこちらです。
Rails Turbolinksをページ毎に無効化する方法
ありがとうございました。