Benutzerdefinierter Block (Slick Slider) funktioniert nicht

Question

Versuch, einen Slick hinzuzufügen(http://kenwheeler.github.io/slick/) schieberegler zur Startseite.Es sieht einfach genug aus, aber ich habe in den letzten 2 Tagen meinen Kopf gegen die Wand geschlagen.

Folgendes habe ich getan:

1) Erstellt home_slider.phtml in app/design/frontend/pkg/default/template um einen benutzerdefinierten Block zu erstellen, der die Banner anzeigt und den Schieberegler js lädt. alert() um mich wissen zu lassen, dass es zumindest geladen wird.Ich habe den Code auf jsfiddle getestet, um zu wissen, dass er funktioniert.

startseite_schieber.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) Modifiziert local.xml in app/design/frontend/pkg/default/layout um den Schieberegler-Block auf der Homepage ganz oben einzufügen.

lokal.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>

Die Banner werden geladen, aber Slick funktioniert nicht (Alarm wurde nicht ausgelöst) und ich kann nicht herausfinden, warum.Muss ich ein benutzerdefiniertes Modul erstellen?

Answer 1

versuchen Sie das vielleicht ist es jquery Konflikt

<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>