jQuery conflict in owlcarousel

Question

I am trying to include the Owl Carousel slider in my Magento 1 Store Home Page. But the line <script src="http://www.owlcarousel.owlgraphic.com/assets/vendors/jquery.min.js"></script> is creating an issue. Other sliders are not working.

I tried to investigate the issue. I read this Stack Overflow question: Magento showing jQuery conflict with each other. I found from the HTML source code of my project Home Page that jQuery is included before prototype. I went to page.xml and head.phtml, but I could not find where the jQuery library is added to the site.

=> page.xml :

<block type="page/html_head" name="head" as="head">
    <action method="addJs"><script>prototype/prototype.js</script></action>
    <action method="addJs"><script>lib/ccard.js</script></action>
    <action method="addJs"><script>prototype/validation.js</script></action>
    <action method="addJs"><script>scriptaculous/builder.js</script></action>
    <action method="addJs"><script>scriptaculous/effects.js</script></action>
    <action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
    <action method="addJs"><script>scriptaculous/controls.js</script></action>
    <action method="addJs"><script>scriptaculous/slider.js</script></action>
    <action method="addJs"><script>varien/js.js</script></action>
    <action method="addJs"><script>varien/form.js</script></action>
    <action method="addJs"><script>mage/translate.js</script></action>
    <action method="addJs"><script>mage/cookies.js</script></action>

    <action method="addItem"><type>skin_js</type><name>js/jquery.easing.1.3.js</name><params/></action>
    <action method="addItem"><type>skin_js</type><name>js/jquery.mobile.customized.min.js</name><params/></action>

    <action method="addItem"><type>skin_js</type><name>js/bootstrap.js</name><params/></action>
    <action method="addItem"><type>skin_js</type><name>js/jquery.carouFredSel-6.2.1.js</name><params/></action>
    <action method="addItem"><type>skin_js</type><name>js/jquery.touchSwipe.js</name><params/></action>

    <action method="addItem"><type>skin_js</type><name>js/jquery.bxslider.min.js</name><params/></action>

    <block type="page/js_cookie" name="js_cookies" template="page/js/cookie.phtml"/>
    <action method="addCss"><stylesheet>css/font-awesome.css</stylesheet></action>
    <action method="addCss"><stylesheet>css/jquery.bxslider.css</stylesheet></action>
    <action method="addCss"><stylesheet>css/photoswipe.css</stylesheet></action>
    <action method="addCss"><stylesheet>css/bootstrap.css</stylesheet></action>
    <action method="addCss"><stylesheet>css/extra_style.css</stylesheet></action>
    <action method="addCss"><stylesheet>css/styles.css</stylesheet></action>
    <action method="addCss"><stylesheet>css/responsive.css</stylesheet></action>
    <action method="addItem"><type>skin_css</type><name>css/styles-ie.css</name><params/><if>lt IE 8</if></action>
    <action method="addCss"><stylesheet>css/superfish.css</stylesheet></action>
    <action method="addCss"><stylesheet>css/camera.css</stylesheet></action>
    <action method="addCss"><stylesheet>css/widgets.css</stylesheet></action>
    <action method="addCss"><stylesheet>css/print.css</stylesheet><params>media="print"</params></action>

    <action method="addItem"><type>js</type><name>lib/ds-sleight.js</name><params/><if>lt IE 7</if></action>
    <action method="addItem"><type>skin_js</type><name>js/ie6.js</name><params/><if>lt IE 7</if></action>
</block>

=> head.phtml :

<meta http-equiv="Content-Type" content="<?php echo $this->getContentType() ?>" />
<title><?php echo $this->getTitle() ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="description" content="<?php echo htmlspecialchars($this->getDescription()) ?>" />
<meta name="keywords" content="<?php echo htmlspecialchars($this->getKeywords()) ?>" />
<meta name="robots" content="<?php echo htmlspecialchars($this->getRobots()) ?>" />
<link rel="icon" href="<?php echo $this->getFaviconFile(); ?>" type="image/x-icon" />
<link rel="shortcut icon" href="<?php echo $this->getFaviconFile(); ?>" type="image/x-icon" />

<script type="text/javascript" src="<?php echo $this->getSkinUrl('js/jquery-1.10.2.min.js') ?>"></script>
<script type="text/javascript" src="<?php echo $this->getSkinUrl('js/jquery-migrate-1.2.1.min.js') ?>"></script>
<script type="text/javascript" src="<?php echo $this->getSkinUrl('js/superfish.js') ?>"></script>
<script type="text/javascript" src="<?php echo $this->getSkinUrl('js/scripts.js') ?>"></script>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300italic,300,400italic,700,700italic&subset=latin,cyrillic' rel='stylesheet' type='text/css'>


<?php echo $this->getCssJsHtml() ?>
<?php echo $this->getChildHtml() ?>
<?php echo $this->helper('core/js')->getTranslatorScript() ?>
<?php echo $this->getIncludes() ?>
<?php
    $product = Mage::registry('current_product');
    if($product){
?>
<meta property="og:title" content="<?php echo trim($product->getName()); ?>"/>
<meta property="og:url" content="<?php echo $this->helper('core/url')->getCurrentUrl();?>"/>
<meta property="og:type" content="product"/>
<meta property="og:image" content="<?php echo $this->helper('catalog/image')->init($product, 'image') ;?>"/>
<?php
    }
?>

Where can I find the jQuery inclusion?

Answer 1

You can add local copy of jquery after following line[skin/frontend/yourpackage/yourtheme/js/jquery.min.js]

<action method="addJs"><script>mage/translate.js</script></action>
<action method="addJs"><script>mage/cookies.js</script></action>
<action method="addItem"><type>skin_js</type><name>js/jquery.min.js</name><params/></action>

OR

Use their js using following way:

<action method="addJs"><script>mage/translate.js</script></action>
<action method="addJs"><script>mage/cookies.js</script></action>
<action method="addItem"><type>external_js</type><name>http://www.owlcarousel.owlgraphic.com/assets/vendors/jquery.min.js</name><params/></action>

And rest of your code

Answer 2

If you use a variable $k, then all of your jQuery calls would be with that object.

You can use below example of code. You have to modify according your requirements:

<script type="text/javascript">
$k = jQuery.noConflict();
$k(document).ready(function(){
   $k('#brands-carousel').elastislide({
        imageW      : 163,
        margin      : 0,
        current     : 0,
        border      : 0,
        minItems    : 2,
        easing      : 'easeInBack'
    });
});
</script>

You have to modify according your requirements:

<script type="text/javascript">
$k = jQuery.noConflict();
$k(document).ready(function(){
   $k('#any-id-here').owlcarousel({
        // code here
    });
});
</script>

Hope this helps!