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

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

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

$(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.

Recommended Posts

When I used Slick on Rails, it competed with Turbolinks.
When building rails6 environment on Ubuntu, it gets stuck with bundle install
I made a portfolio with Ruby On Rails
Error encountered with notes when deploying docker on rails
I tried installing Ruby on Rails related plugin with vim-plug
When I personally developed with Rails, it was a painful story that Rails was hit very much
I want to add a browsing function with ruby on rails
What I was addicted to when implementing google authentication with rails
[Rails] I want to add data to Params when transitioning with link_to
UnsupportedClassVersionError was output when I placed the .war file built with Eclipse on EC2 and executed it.
[Rails] "pry-rails" that can be used when saving with the create method
A collection of methods often used when manipulating time with TimeWithZone of Rails
When I try to sign up with devise, it automatically redirects to root_path
Since the du command used when the capacity is full is difficult to use, I tried wrapping it with ruby
After deploying a Rails app on EC2, I can access it with a public IP address but not with a public DNS
[Ruby on Rails] View test with RSpec
I can't install rails on my mac
Notes on using FCM with Ruby on Rails
[Ruby on Rails] Controller test with RSpec
java.lang.ClassNotFoundException: Correspondence when it comes with javax.xml.bind.JAXBException
[Ruby on Rails] Model test with RSpec
I used it without knowing the O / R mapping of rails, so I checked it.
I understand Ruby on Rails params (with Hanshin Tigers poker faceman, Atsushi Nomi)
[Rails] When transitioning to a page with link_to, move to the specified location on the page
When I tried to use a Wacom tablet with ubuntu 20.04, I didn't recognize it.