JavaScript function not firing off for owlcarousel-rails plugin

The javascript is not working for 'owlcarousel-rails' plugin. I have the
gem and require statements for application.css/application.js setup
properly.

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

I called the plugin with:

            <script type= 'text/javascript' >
              $(".owl-carousel").owlCarousel();
            </script> in my <header></header>

<div class="owl-carousel" style="z-index: 1;">
<div><%= image_tag 'JohnsPhotos/weekend-getaway1.jpg'
%></div>
<div><%= image_tag 'JohnsPhotos/weekend-getaway2.jpg'
%></div>
</div> the tags for the plugin are mid page in the
<body></body>

Why isn't the javascript/css displaying the photos?

The javascript is not working for 'owlcarousel-rails' plugin.

Disclaimer: never heard of this plugin, but ---

              $(".owl-carousel").owlCarousel();

if you're calling that method *before* any such elements exist in the
DOM, I'd expect exactly nothing to happen :slight_smile:

Have you looked at the JS console/log to see if there are errors?

Hassan Schroeder wrote in post #1165339:

The javascript is not working for 'owlcarousel-rails' plugin.

Disclaimer: never heard of this plugin, but ---

              $(".owl-carousel").owlCarousel();

if you're calling that method *before* any such elements exist in the
DOM, I'd expect exactly nothing to happen :slight_smile:

Have you looked at the JS console/log to see if there are errors?

--
Hassan Schroeder ------------------------ hassan.schroeder@gmail.com
http://about.me/hassanschroeder
twitter: @hassan

I'll try to call it after div code block, and then see if the function
fires off.
<div class="row">
    <div class="large-12 medium-12 small-2 columns mid-index-bg">
      <h2 style="color: red; text-align: center;">Carousel
Placeholder</h2>
        <div class="owl-carousel" style="z-index: 1;">
            <div class="item"><%= image_tag 'Photo1'%</div>
            <div class="item"><%= image_tag 'Photo2'%></div>
        </div>
    </div>
  </div>

Hassan Schroeder wrote in post #1165339:

View the source of the page in the browser to get a clue as to what is going on.

Colin

I was calling an ID instead of a class with the initializer. Now, it's
working perfectly!! Thank you all for taking the time out to guide me.