A ruby gem that uses the Rails asset pipeline to include the jQuery Slick plugin by Ken Wheeler (https://kenwheeler.github.io/slick/).
If you are using Rails 6 with Webpacker then you don't need this gem (install Slick directly from NPM instead). Check out this sample app for more info.
Add this line to your application's Gemfile:
gem "jquery-slick-rails"
And then execute:
$ bundle
Or install it yourself as:
$ gem install jquery-slick-rails
NOTE: this is a jQuery plugin so you will also need the jquery-rails
gem (it is not added by default starting from Rails 5.1):
You will need to add this line into your application.js
:
//= require jquery.slick
Then into application.scss
:
@import 'slick';
or into application.css
:
/*
*= require slick
*/
Starting from version 1.4.0 Slick provides an optional theme, so if you want to employ default styling, include
the following line into application.scss
:
@import 'slick-theme';
or into application.css
:
/*
*= require slick-theme
*/
Check out this repo showing how to use Slick carousel with Rails app with and without Webpacker (it also shows how to use the plugin with Turbolinks).
If you are using Slick with Turbolinks, you might run into some problems with the browser's "back" button. If that happens, the following solution might help. Add this code to your layouts/application.html.erb:
<head>
<% if content_for?(:head) %>
<%= yield(:head) %>
<% end %>
</head>
And then on any page that has Slick:
<% content_for :head do %>
<meta name="turbolinks-cache-control" content="no-cache">
<% end %>
The idea is that we are opting the page out of caching, as Turbolinks uses it during restoration visits (that is, when you click "back").
Another solution was to employ the unslick
method to prepare your document before Turbolinks caches it:
jQuery(document).on('turbolinks:before-cache', $('.scroller').slick('unslick'))
However, this does not seem to work anymore - maybe because Slick has lots of opened issues related to unslick.
Read more on StackOverflow.
Run
$ bundle install
and then
$ rake test
- Fork it
- Create your feature branch (
git checkout -b my-new-feature
) - Make sure tests are passing
- Commit your changes (
git commit -am 'Added some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create new Pull Request
This plugin is licensed under the MIT License.
Copyright (c) 2017 Ilya Bodrov