Пользовательский блок (слайдер) не работает
-
13-12-2019 - |
Вопрос
Пытаюсь добавить слика(http://kenwheeler.github.io/slick/) слайдер на главную страницу.Это выглядит достаточно просто, но последние 2 дня я бился головой о стену.
Вот что я сделал:
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
чтобы вставить блок слайдера на главной странице прямо вверху.
локальный.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 не работает (не сработало оповещение), и я не могу понять почему.Нужно ли мне создавать собственный модуль?
Решение
попробуй, может быть, это и есть 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>