الكتلة المخصصة (Slick Slider) لا تعمل

Question

محاولة إضافة بقعة(http://kenwheeler.github.io/slick/) شريط التمرير إلى الصفحة الرئيسية.يبدو الأمر بسيطًا بما فيه الكفاية، لكني كنت أضرب رأسي بالحائط خلال اليومين الماضيين.

وإليكم ما قمت به:

1) خلق home_slider.phtml في app/design/frontend/pkg/default/template لإنشاء كتلة مخصصة تعرض اللافتات وتحميل شريط التمرير js. alert() لإعلامي على الأقل أنه يتم التحميل.لقد اختبرت الكود الموجود على jsfiddle لأعرف أنه يعمل.

home_slider.phtml

<div class="home_slider">
    <div><a href="111"><img src="<?php echo $this->getSkinUrl('images/media/web-banner_2015_1.png')?>" /></a></div>
    <div><a href="222"><img src="<?php echo $this->getSkinUrl('images/media/web-banner_2015_2.png')?>" /></a></div>
    <div><a href="333"><img src="<?php echo $this->getSkinUrl('images/media/banner3.jpg')?>" /></a></div>
</div>

<!-- <script type="text/javascript" src="<?php echo $this->getJsUrl('slick/slick.min.js')?>"></script> -->

<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.min.js"></script>  

<script type="text/javascript">
    var slider = $(".home_slider");
    slider.on('init', function(){ 
        alert('fire in the hole!');
    });
    slider.slick({
        initialSlide: 1,
        slidesToShow: 1,
        slidesToScroll: 1
    });
</script>

2) معدلة local.xml في app/design/frontend/pkg/default/layout لإدراج كتلة شريط التمرير على الصفحة الرئيسية في الجزء العلوي مباشرةً.

local.xml

<?xml version="1.0"?>
<layout version="0.1.0">
    <default>
        <reference name="head">
            <remove name="top.container" />  <!-- does not remove header-language-background completely, done with css -->
            <remove name="welcome" />                   
        </reference>
        <reference name="top.links">
            <remove name="checkout_cart_link"/>  <!-- removes My Cart and Checkout from Account header nav -->      
        </reference>    
    </default>  
    <cms_index_index>
        <reference name="content">
            <block type="core/template" name="home_slider" template="home_slider.phtml" before="-">
            </block>
        </reference>
    </cms_index_index>  
</layout>

يتم تحميل اللافتات، لكن Slick لا يعمل (لم يتم إطلاق التنبيه) ولا يمكنني معرفة السبب.هل أحتاج إلى إنشاء وحدة مخصصة؟

Answer 1

حاول أن يكون هذا هو عليه jquery صراع

<script type="text/javascript">
var jQuery = jQuery.noConflict()
    var slider = jQuery(".home_slider");
    slider.on('init', function(){ 
        alert('fire in the hole!');
    });
    slider.slick({
        initialSlide: 1,
        slidesToShow: 1,
        slidesToScroll: 1
    });
</script>