So I'm a bit of a newbie in Rails, but I've been trying to convert a template for an e-commerce site I'm trying to build for a project between my friend and I. A demo of the site can be found here: (demo2.transvelo.in/html/rimbus/index.php?page=fashion-v4&h=6&f=2). However, I've run into a few issues converting it properly, mainly that the Owl Carousel application doesn't seem to be working properly. 

So as you can see in the demo, that's how the owl carousel should be run. And in the files that I actually received for the template -- in a non-rails environment (just pure html/css/js?), the template files actually work as well and as they shoould. It looks like it does on the demo page. 

However, after importing all the html, css, and js -- and changing some of the pictures around on my own, it looks like [this](http://i.stack.imgur.com/WZuEy.jpg).

So the first problem here is that the carousel controls are pretty messed up. From the picture you can see that on the current page there are only two options to cycle through, rather than the three that should be there. However, even more strangely, once you cycle through the pages, another carousel control menu shows up at the top of the carousel (link below). And you cannot see, because unfortunately the carousel takes up the whole page, the other two carousel control option is also still there as well at the same time, making this sort of double carousel thing . 

And so looking further into this, it seems that there seems to be an owl carousel object being created within the first two (?) owl carousel objects as you can see [here](http://i.stack.imgur.com/ppxwe.jpg). You can also see the 3 option carousel control object here.

So I've been trying to figure out what's wrong but haven't been able to do so. I've tried implementing the owl-carousel gem and fiddling around with the code. Also as a warning, the template came with it's own owl-carousel js file that adds a lot of specificities and extras to the owl functions, and so the owl carousel might not be necessarily called the same way it usually is as you will hopefully be able to see. I've also tried changing the code up a bit, because in the html code, owl carousel is called by a class and an id, but manipulating and deleting variables individually, each one seems necessary for the carousel object. 

But yeah, has anyone experience anything like this before or have any insight? Or this is my first time trying to convert an entire javascript template but not my first time encountering js issues with rails, and so is there possible something wrong with my dependencies/asset pipeline?

Sorry for the very long post. The relevant code for the owl carousel part of the html file is this:

```
<div class="body-content">
  <div class="food outer-bottom-vs">
    <div class="food-slider hero-style-2" id="hero">
      <div class="big-slider owl-main owl-carousel owl-inner-nav owl-ui-lg" id="owl-main">
        <div class="item" id="banner1">
          <div class="container">
            <div class="slider caption vertical-center text-right">
              <h2 class="fadeInDown-1">Aniart</h2>
              <h1 class="fadeInDown-2">Anime art <span>straight from the artist</span></h1>
              <div class="slide-btn fadeInDown-3"> <a href="#" class="btn btn-primary">Shop Now</a> </div>
            </div>
          </div>
        </div>
        <div class="item" style="background-image: url(app/assets/images/sliders/7.jpg);">
          <div class="container">
            <div class="slider caption vertical-center text-right">
              <h2 class="fadeInDown-1">get gift card</h2>
              <h1 class="fadeInDown-2">drink <span>&amp;food</span></h1>
              <div class="slide-btn fadeInDown-3"> <a href="#" class="btn btn-primary">Shop Now</a> </div>
            </div>
          </div>
        </div>
        <div class="item" style="background-image: url(assets/images/sliders/7.jpg);">
          <div class="container">
            <div class="slider caption vertical-center text-right">
              <h2 class="fadeInDown-1">get gift card</h2>
              <h1 class="fadeInDown-2">drink <span>&amp;food</span></h1>
              <div class="slide-btn fadeInDown-3"> <a href="#" class="btn btn-primary">Shop Now</a> </div>
            </div>
          </div>
        </div>
      </div>
    </div>

```

application.scss:

```
 *= require_tree .
 *= require_self
 *= require foundation_and_overrides
 *= require font-awesome
 *= require lightbox
 *= require owl.carousel
 */
@import "bootstrap-sprockets";
@import "owl.carousel";
@import "owl.carousel/owl.theme.default";

```

application.js

```
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs

//= require bootstrap-sprockets
//= require foundation

//= require turbolinks
// require lightbox
//= require_tree .

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

```

some of the scripts.js template file

```
(function($) {
    "use strict";

    /*===================================================================================*/
    /*  owl carousel
    /*===================================================================================*/
    $(document).ready(function () {

        var dragging = true;
        var owlElementID = "#owl-main";

        function fadeInReset() {
            if (!dragging) {
                $(owlElementID + " .caption .fadeIn-1, " + owlElementID + " .caption .fadeIn-2, " + owlElementID + " .caption .fadeIn-3," + owlElementID + " .caption .fadeIn-4").stop().delay(800).animate({ opacity: 0 }, { duration: 400, easing: "easeInCubic" });
            }
            else {
                $(owlElementID + " .caption .fadeIn-1, " + owlElementID + " .caption .fadeIn-2, " + owlElementID + " .caption .fadeIn-3," + owlElementID + " .caption .fadeIn-4").css({ opacity: 0 });
            }
        }

        function fadeInDownReset() {
            if (!dragging) {
                $(owlElementID + " .caption .fadeInDown-1, " + owlElementID + " .caption .fadeInDown-2, " + owlElementID + " .caption .fadeInDown-3," + owlElementID + " .caption .fadeInDown-4").stop().delay(800).animate({ opacity: 0, top: "-15px" }, { duration: 400, easing: "easeInCubic" });
            }
            else {
                $(owlElementID + " .caption .fadeInDown-1, " + owlElementID + " .caption .fadeInDown-2, " + owlElementID + " .caption .fadeInDown-3," +  owlElementID + " .caption .fadeInDown-4").css({ opacity: 0, top: "-15px" });
            }
        }

        function fadeInUpReset() {
            if (!dragging) {
                $(owlElementID + " .caption .fadeInUp-1, " + owlElementID + " .caption .fadeInUp-2, " + owlElementID + " .caption .fadeInUp-3," + owlElementID + " .caption .fadeInUp-4").stop().delay(800).animate({ opacity: 0, top: "15px" }, { duration: 400, easing: "easeInCubic" });
            }
            else {
                $(owlElementID + " .caption .fadeInUp-1, " + owlElementID + " .caption .fadeInUp-2, " + owlElementID + " .caption .fadeInUp-3," + owlElementID + " .caption .fadeInUp-4").css({ opacity: 0, top: "15px" });
            }
        }

        function fadeInLeftReset() {
            if (!dragging) {
                $(owlElementID + " .caption .fadeInLeft-1, " + owlElementID + " .caption .fadeInLeft-2, " + owlElementID + " .caption .fadeInLeft-3, " + owlElementID + " .caption .fadeInLeft-4").stop().delay(800).animate({ opacity: 0, left: "15px" }, { duration: 400, easing: "easeInCubic" });
            }
            else {
                $(owlElementID + " .caption .fadeInLeft-1, " + owlElementID + " .caption .fadeInLeft-2, " + owlElementID + " .caption .fadeInLeft-3," + owlElementID + " .caption .fadeInLeft-4").css({ opacity: 0, left: "15px" });
            }
        }

        function fadeInRightReset() {
            if (!dragging) {
                $(owlElementID + " .caption .fadeInRight-1, " + owlElementID + " .caption .fadeInRight-2, " + owlElementID + " .caption .fadeInRight-3," + owlElementID + " .caption .fadeInRight-4").stop().delay(800).animate({ opacity: 0, left: "-15px" }, { duration: 400, easing: "easeInCubic" });
            }
            else {
                $(owlElementID + " .caption .fadeInRight-1, " + owlElementID + " .caption .fadeInRight-2, " + owlElementID + " .caption .fadeInRight-3," + owlElementID + " .caption .fadeInRight-4").css({ opacity: 0, left: "-15px" });
            }
        }

        function fadeIn() {
            $(owlElementID + " .active .caption .fadeIn-1").stop().delay(500).animate({ opacity: 1 }, { duration: 800, easing: "easeOutCubic" });
            $(owlElementID + " .active .caption .fadeIn-2").stop().delay(700).animate({ opacity: 1 }, { duration: 800, easing: "easeOutCubic" });
            $(owlElementID + " .active .caption .fadeIn-3").stop().delay(1000).animate({ opacity: 1 }, { duration: 800, easing: "easeOutCubic" });
            $(owlElementID + " .active .caption .fadeIn-4").stop().delay(1000).animate({ opacity: 1 }, { duration: 800, easing: "easeOutCubic" });
        }

        function fadeInDown() {
            $(owlElementID + " .active .caption .fadeInDown-1").stop().delay(500).animate({ opacity: 1, top: "0" }, { duration: 800, easing: "easeOutCubic" });
            $(owlElementID + " .active .caption .fadeInDown-2").stop().delay(700).animate({ opacity: 1, top: "0" }, { duration: 800, easing: "easeOutCubic" });
            $(owlElementID + " .active .caption .fadeInDown-3").stop().delay(1000).animate({ opacity: 1, top: "0" }, { duration: 800, easing: "easeOutCubic" });
            $(owlElementID + " .active .caption .fadeInDown-4").stop().delay(1000).animate({ opacity: 1, top: "0" }, { duration: 800, easing: "easeOutCubic" });
        }

        function fadeInUp() {
            $(owlElementID + " .active .caption .fadeInUp-1").stop().delay(500).animate({ opacity: 1, top: "0" }, { duration: 800, easing: "easeOutCubic" });
            $(owlElementID + " .active .caption .fadeInUp-2").stop().delay(700).animate({ opacity: 1, top: "0" }, { duration: 800, easing: "easeOutCubic" });
            $(owlElementID + " .active .caption .fadeInUp-3").stop().delay(1000).animate({ opacity: 1, top: "0" }, { duration: 800, easing: "easeOutCubic" });
            $(owlElementID + " .active .caption .fadeInUp-4").stop().delay(1000).animate({ opacity: 1, top: "0" }, { duration: 800, easing: "easeOutCubic" });
        }

        function fadeInLeft() {
            $(owlElementID + " .active .caption .fadeInLeft-1").stop().delay(500).animate({ opacity: 1, left: "0" }, { duration: 800, easing: "easeOutCubic" });
            $(owlElementID + " .active .caption .fadeInLeft-2").stop().delay(700).animate({ opacity: 1, left: "0" }, { duration: 800, easing: "easeOutCubic" });
            $(owlElementID + " .active .caption .fadeInLeft-3").stop().delay(1000).animate({ opacity: 1, left: "0" }, { duration: 800, easing: "easeOutCubic" });
            $(owlElementID + " .active .caption .fadeInLeft-4").stop().delay(1000).animate({ opacity: 1, left: "0" }, { duration: 800, easing: "easeOutCubic" });
        }

        function fadeInRight() {
            $(owlElementID + " .active .caption .fadeInRight-1").stop().delay(500).animate({ opacity: 1, left: "0" }, { duration: 800, easing: "easeOutCubic" });
            $(owlElementID + " .active .caption .fadeInRight-2").stop().delay(700).animate({ opacity: 1, left: "0" }, { duration: 800, easing: "easeOutCubic" });
            $(owlElementID + " .active .caption .fadeInRight-3").stop().delay(1000).animate({ opacity: 1, left: "0" }, { duration: 800, easing: "easeOutCubic" });
            $(owlElementID + " .active .caption .fadeInRight-4").stop().delay(1000).animate({ opacity: 1, left: "0" }, { duration: 800, easing: "easeOutCubic" });
        }

        $(owlElementID).owlCarousel({
            animateOut: 'fadeOut',
            autoplay: false,
            autoplayTimeout: 2000,
            autoplayHoverPause: true,
            stopOnHover: true,
            loop: true,
            navRewind: true,
            items: 1,
            dots: true,
            nav:false,
            //navText: ["<i class='icon fa fa-angle-left'></i>", "<i class='icon fa fa-angle-right'></i>"],
            lazyLoad: true,
            stagePadding: 0,
            responsive : {
                0 : {
                    items : 1,
                },
                480: {
                    items : 1,
                },
                768 : {
                    items : 1,
                },
                992 : {
                    items : 1,
                },
                1199 : {
                    items : 1,
                },
                onTranslate : function(){
                      echo.render();
                    }
            },

            onInitialize   : function() {
                fadeIn();
                fadeInDown();
                fadeInUp();
                fadeInLeft();
                fadeInRight();
            },

            onInitialized   : function() {
                fadeIn();
                fadeInDown();
                fadeInUp();
                fadeInLeft();
                fadeInRight();
            },

            onResize   : function() {
                fadeIn();
                fadeInDown();
                fadeInUp();
                fadeInLeft();
                fadeInRight();
            },

            onResized   : function() {
                fadeIn();
                fadeInDown();
                fadeInUp();
                fadeInLeft();
                fadeInRight();
            },

            onRefresh   : function() {
                fadeIn();
                fadeInDown();
                fadeInUp();
                fadeInLeft();
                fadeInRight();
            },

            onRefreshed   : function() {
                fadeIn();
                fadeInDown();
                fadeInUp();
                fadeInLeft();
                fadeInRight();
            },

            onUpdate   : function() {
                fadeIn();
                fadeInDown();
                fadeInUp();
                fadeInLeft();
                fadeInRight();
            },

            onUpdated   : function() {
                fadeIn();
                fadeInDown();
                fadeInUp();
                fadeInLeft();
                fadeInRight();
            },

            onDrag : function() {
                dragging = true;
            },

            onTranslate   : function() {
                fadeIn();
                fadeInDown();
                fadeInUp();
                fadeInLeft();
                fadeInRight();
            },
            onTranslated   : function() {
                fadeIn();
                fadeInDown();
                fadeInUp();
                fadeInLeft();
                fadeInRight();
            },

            onTo   : function() {
                fadeIn();
                fadeInDown();
                fadeInUp();
                fadeInLeft();
                fadeInRight();
            },

            onChange    : function() {
                fadeIn();
                fadeInDown();
                fadeInUp();
                fadeInLeft();
                fadeInRight();
            },

            onChanged  : function() {
                fadeInReset();
                fadeInDownReset();
                fadeInUpReset();
                fadeInLeftReset();
                fadeInRightReset();
                dragging = false;
            }
        });

        $('.banner-slider').owlCarousel({
            loop:true,
            margin:30,
            autoplay: true,
            nav:false,
            dots: true,
            navText: ["", ""],
            items:1,
            responsive:{
                0:{
                    items:1
                },
                600:{
                    items:3
                },
                1000:{
                    items:1
                }
            }
        });
        $('.clients-say').owlCarousel({
            loop:true,
            margin:30,
            autoplay: true,
            nav:true,
            navText: ["", ""],
            items:1,
            responsive:{
                0:{
                    items:1
                },
                600:{
                    items:1
                },
                1000:{
                    items:1
                }
            }
        });

```

I also get an error of "tooltip is not a function" in the console which shows that my jquery might be implementing correctly. However tooltip is called way after any owl carousel functions are called in the scripts.js file. Can this still be a cause for concern?