[RUBY] When I used Slick on Rails, it competed with Turbolinks.

When I used Slick for business, Due to the influence of Turbolinks, the entire slide shifts to the right when loading for the first time. Since the phenomenon was occurring, I will leave the method to solve it.

environment

• Rails5

• jquery-slick-rails

I'm using a gem called jquery-slick-rails, Before putting this in, I put in the download version from the head family and implemented it. The same phenomenon was occurring at this time, so it seems that it was not the tool's fault.

Status

When I set centerMode: true in the silick settings, When the page is loaded for the first time (to be exact, when there is no log left in the cookie), The slide image shifts to the right as a whole. That is.

Since it is displayed properly when it is not in centerMode, I'm sorry I don't know why this is the only time. If anyone knows, please let me know.

After a lot of research, I found that Turbolinks was involved.

approach

First of all, I will describe the solution. Avoid using Turbolinks for the target page.

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

Add data-turbolinks =" false " to the link that jumps to Turn off Turblinks for that page only. I'm adding an attribute directly to link_to, It seems that you can set a div tag that surrounds the link and add an attribute here.

It seems to be incompatible with Turbolinks. It seems better to take measures when using it with Rails.

Other methods I tried

• Remove require turbo links

This is the method I used when I checked if it was really Turbolinks' fault. Basically, you shouldn't do this.

• turbolinks: use load

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

I think this is basic, I couldn't do this this time. I wonder if it was written incorrectly ... ?? I feel lack of study in places where I don't really understand this.

Here is the article that I referred to this time. How to disable Rails Turbolinks page by page Thank you very much.