Side Scrolling Carousel

How to install Owl Carousel

There are a lot of steps (and copying and pasting) in order to setup Owl Carousel in your Rails application. Let's try to do it together.

Adding the package

Assuming you're using yarn, we'll add the package from Terminal:

yarn add owl.carousel

Configuring the package

Now let's configure our JS for this package. Let's head to javascript/packs/application.js

There are two things we need to do here. First, let's import Owl Carousel

// javascript/packs/application.js
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel';

Second, we need to activate the Owl Carousel in the same file. Be careful, with this one. You might already have the document.addEventListener if you created the app with the Le Wagon templates. If that's the case, don't duplicate it, add it to the existing one.

// be careful you *might* already have this listener
document.addEventListener('turbolinks:load', () => {
  $('.owl-carousel').owlCarousel({
    loop: true,
    margin: 10,
    responsive:{
      0:{
        items:1
       },
      600:{
        items:3
       },
      1000: {
        items: 5
      }
     },
     nav: true,
     navText: ["<i class='fa fa-chevron-left'></i>","<i class='fa fa-chevron-right'></i>"]
   })
});

Notice there are a few options can tweak in here. These are the default setting that I use. As you can see, you can choose the responsiveness and if you want the side arrows on your scrollable container.


Lastly, we need to attach jQuery to the window. I'm going under the assumption you've already installed jQuery for Bootstrap. Go to your config/webpack/environment.js. We need to add this line: window.jQuery': 'jquery'. It should look like this now:

// config/webpack/environment.js
const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default'],
    'window.jQuery': 'jquery'
  })
)
module.exports = environment

Adding the style

Next, we need to make sure we're using the CSS that we were importing in our JS above. Let's head to our app/views/layouts/application.html. Let's add this into our head

<!-- app/views/layouts/application.html -->

<%= stylesheet_pack_tag 'application' %>

Lastly, we can add some style to the navigation arrows if you kept them active in the configuration. Feel free to change as you see fit. It's probably best to create a component in your

// app/assets/stylesheets/components/carousel.scss

.owl-carousel {
  display: flex;
  .owl-prev {
    position: absolute;
    top: 0;
    left: 0;
    height: 90%;
    font-size: 30px !important;
  }
  .owl-next {
    position: absolute;
    top: 0;
    right: 0;
    height: 90%;
    font-size: 30px !important;
  }
}
.owl-item.active:hover {
  cursor: grab;
}

Adding it to the view

You need to add two classes to your parent container. The organization should look like this.

Make sure you've restarted your Rails server.

<div class="owl-carousel owl-theme">
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
</div>

But really it's probably best to build your interation into a partial.

<!-- app/views/XXXXXX/index.html.erb -->

<div class="owl-carousel owl-theme">
  <% @lists.each do |list| %>
    <%= render 'lists/card', list: list %>
  <% end %>
</div>

See it in action

Movie Watchlist Example