Tony
Tony

Reputation: 219

Owl Carousel Slider won't Display in Ruby on Rails App

I've been trying to implement the OwlCarousel image slider into my RoR app. The problem is that the slider doesn't seem to be called upon.

This is what it currently outputs (with two images) -

current output

This is my current relevant code -

In application.js

//= require jquery
//= require bootstrap-sprockets
//= require jquery_ujs
//= require turbolinks
//= require owl.carousel
//= require_tree .

In application.css.scss

/*
 *= require owl.carousel
 *= require owl.theme
 *= require_tree .
 *= require_self
 */

@import "bootstrap-sprockets";
@import "bootstrap";

In show.html.erb

    <div>   
        <div class="col-xs-12 col-md-offset-2 col-md-6 project-right-panel">
            <div id="owl-carousel">
                <% @post_attachments.each do |p| %>
                  <%= image_tag p.avatar_url %>
                  <%= link_to "Edit Attachment", edit_post_attachment_path(p) %>
                <% end %>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $(document).ready(function(){
            $("#owl-carousel").owlCarousel({
                autoPlay: 3000,
                item : 3,
                itemsDesktop : [1119,3],
                itemsDesktopSmall : [979, 3]
            });
        });
    </script>

Upvotes: 2

Views: 1443

Answers (1)

Benjamin
Benjamin

Reputation: 1070

item : 3 should be items: 3. That might be it. Their demo also looks like they want you to wrap your images in a div with class item.

Upvotes: 1

Related Questions