CODEWITHSUNDEEP
jqueryowl-carouselruby-on-rails-4.2
Lemito
Lemito

Reputation: 28

Owl Carousel don't work in Rails 4.2.1. - Images stacked in row instead of showing in carousel; dynamic content; each loop

Like my question says, Owl Carousel is not showing in my Rails app. Images are just showed stacked in view, without any slide buttons or carousel. Why?

show.html.erb

<div class="columns">
  <div id="owl-example" class="owl-carousel owl-theme">
    <% @product.pictures.each do |pic| %>
      <div><%= image_tag pic.image.url(:large) %></div>
    <% end %>
  </div>  
</div>

application.js

 //= require jquery
 //= require jquery_ujs
 //= require foundation
 //= require bxslider
 //= require nprogress
 //= require nprogress-turbolinks
 //= require owl.carousel
 //= require jquery.turbolinks
 //= require turbolinks
 //= require_tree .

 $(function(){ $(document).foundation(); });

 $(document).ready(function(){
   $('.bxslider').bxSlider({

   });
 });

 $(document).ready(function(){
   $("#owl-example").owlCarousel({

   });
 });

application.scss

 *= require_tree .
 *= require_self
 *= require bxslider
 *= require foundation_and_overrides
 *= require font-awesome
 *= require nprogress
 *= require owl.carousel
 *= require owl.theme

Upvotes: 0

Views: 815

Answers (2)

Jokūbas
Jokūbas

Reputation: 331

I had had problems with OwlCarousel2 and Turbolinks5 - on browser 'Back' button click my owl carousel had been disappearing. So, I found solution with these lines of code:

    # owl carousel in html.erb
    <div class="owl-carousel owl-theme" id="owl">
      <% @trip_route.places_ordered.each do |place| %>
        <div><%= image_tag 'placeholder.png' %></div>
      <% end %>
    </div>

    # application.js
    //on turbolinks:load init owlCarousel
        $(document).on("turbolinks:load", function() {
           $("#owl").owlCarousel();
        }
    //on turbolinks:before-cache destroy it owlCarousel
        $(document).on('turbolinks:before-cache', function() {
          $("#owl").owlCarousel('destroy');
        });

https://owlcarousel2.github.io/OwlCarousel2/docs/api-events.html

Upvotes: 0

Arvind
Arvind

Reputation: 2781

Have you tried this?

$("#owl-example").owlCarousel();

Updated:

it might possible due to turbolinks your js is not loading could you try this one 

$(document).on('ready page:load', function () {
   $("#owl-example").owlCarousel({

   });
});

Updated: I found it is due to not proper css , I have implemented it by this code with your code.

application.js

$(document).on('ready page:load', function () {
   $("#owl-demo").owlCarousel({

   });
});

application.css

#owl-demo .item{
  margin: 3px;
}
#owl-demo .item img{
  display: block;
  width: 100%;
  height: auto;
}

show.html.erb

  <div class="columns">
    <div id="owl-demo" >
      <% @product.pictures.each do |pic| %>
        <div class='item'><%= image_tag pic.image.url(:large) %></div>
      <% end %>
    </div>  
  </div>

from here

Upvotes: 1

Related Questions