3

Trying to add a Slick(http://kenwheeler.github.io/slick/) slider to homepage. It looks simple enough, but I have been banging my head against the wall for the last 2 days.

Here's what I have done:

1) Created home_slider.phtml in app/design/frontend/pkg/default/template to create a custom block that displays the banners and load the slider js. alert() to let me know at least it's loading. I have tested the code on jsfiddle to know it works.

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) Modified local.xml in app/design/frontend/pkg/default/layout to insert the slider block on homepage right at the top.

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>

The banners load, but Slick is not working (alert didn't fire) and I can't figure out why. Do I need to create a custom module?

1

try this may be it is jquery conflict

<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>
  • That did it! Off to bang my head on the wall one last time so I would remember to do that in the future. Thank you. – User007 Jun 2 '15 at 18:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.