Slick Carousel 不适用于 Foundation 5 并且在 Firefox 中需要 JS
Slick Carousel not working with Foundation 5 and Require JS in Firefox
我是一个没有经验的前端开发人员,我目前正在使用 Foundation 5.5 以及 Require JS 和 Slick Carousel http://kenwheeler.github.io/slick/ 使用较小的图片,以便在单击它们时转到正确的幻灯片。
<div class='block-4-img columns medium-8 large-6' data-equalizer-watch>
<span class='logo-helper'></span>
<div class='slick-holder columns large-12'>
<div class='js-slick slick-system'>
<div class='slide'>
<img src={{ app.asset_path ~ '/img/new-sales/slick/slick1.jpg'}}></img>
</div>
<div class='slide'>
<img src={{ app.asset_path ~ '/img/new-sales/slick/slick2.jpg'}}></img>
</div>
<div class='slide'>
<img src={{ app.asset_path ~ '/img/new-sales/slick/slick3.jpg'}}></img>
</div>
<div class='slide'>
<img src={{ app.asset_path ~ '/img/new-sales/slick/slick4.jpg'}}></img>
</div>
</div>
<div class='slick-buttons'>
<ul>
<li><img class='slick-button-1 slick-button' src={{ app.asset_path ~ '/img/new-sales/slick/slick1.jpg'}}></img></li><!-- --><li><img class='slick-button-2 slick-button' src={{ app.asset_path ~ '/img/new-sales/slick/slick2.jpg'}}></img></li><!-- --><li><img class='slick-button slick-button-3' src={{ app.asset_path ~ '/img/new-sales/slick/slick3.jpg'}}></img></li><!-- --><li><img class='slick-button slick-button-4' src={{ app.asset_path ~ '/img/new-sales/slick/slick4.jpg'}}></img></li><!-- -->
</div>
</div><!-- end slick holder -->
</div><!-- block-4-img -->
这是我当前正在处理的页面:https://beyondtells.com/silex/new-sales?vero_id=1@1.com(请确保保留查询字符串,否则它不会显示)
它在我一直在使用的 Chrome 中运行良好,我查看了 Firefox/IE 中的页面,但它似乎无法正常运行。旋转木马中的图像垂直堆叠在一起,插件似乎不起作用。
在花了很多时间试图找出问题所在之后。我意识到问题出在 require JS 中。我定义了一个'preinit',要求随我需要,我用的方法是有问题的。这是一个例子:
// Append and load styles
var linkNode = document.createElement("link");
linkNode.rel = "stylesheet";
linkNode.type = "type/css";
linkNode.href = "//cdnjs.cloudflare.com/ajax/libs/sweetalert/0.3.3/sweet-alert.min.css";
document.head.appendChild(linkNode);
虽然这在 Chrome 中工作正常,但 CSS 没有被加载,即使它可以在开发工具中看到。因此,我只是以正常方式链接了 css 文件。谢谢大家花时间阅读我的问题。
我是一个没有经验的前端开发人员,我目前正在使用 Foundation 5.5 以及 Require JS 和 Slick Carousel http://kenwheeler.github.io/slick/ 使用较小的图片,以便在单击它们时转到正确的幻灯片。
<div class='block-4-img columns medium-8 large-6' data-equalizer-watch>
<span class='logo-helper'></span>
<div class='slick-holder columns large-12'>
<div class='js-slick slick-system'>
<div class='slide'>
<img src={{ app.asset_path ~ '/img/new-sales/slick/slick1.jpg'}}></img>
</div>
<div class='slide'>
<img src={{ app.asset_path ~ '/img/new-sales/slick/slick2.jpg'}}></img>
</div>
<div class='slide'>
<img src={{ app.asset_path ~ '/img/new-sales/slick/slick3.jpg'}}></img>
</div>
<div class='slide'>
<img src={{ app.asset_path ~ '/img/new-sales/slick/slick4.jpg'}}></img>
</div>
</div>
<div class='slick-buttons'>
<ul>
<li><img class='slick-button-1 slick-button' src={{ app.asset_path ~ '/img/new-sales/slick/slick1.jpg'}}></img></li><!-- --><li><img class='slick-button-2 slick-button' src={{ app.asset_path ~ '/img/new-sales/slick/slick2.jpg'}}></img></li><!-- --><li><img class='slick-button slick-button-3' src={{ app.asset_path ~ '/img/new-sales/slick/slick3.jpg'}}></img></li><!-- --><li><img class='slick-button slick-button-4' src={{ app.asset_path ~ '/img/new-sales/slick/slick4.jpg'}}></img></li><!-- -->
</div>
</div><!-- end slick holder -->
</div><!-- block-4-img -->
这是我当前正在处理的页面:https://beyondtells.com/silex/new-sales?vero_id=1@1.com(请确保保留查询字符串,否则它不会显示)
它在我一直在使用的 Chrome 中运行良好,我查看了 Firefox/IE 中的页面,但它似乎无法正常运行。旋转木马中的图像垂直堆叠在一起,插件似乎不起作用。
在花了很多时间试图找出问题所在之后。我意识到问题出在 require JS 中。我定义了一个'preinit',要求随我需要,我用的方法是有问题的。这是一个例子:
// Append and load styles
var linkNode = document.createElement("link");
linkNode.rel = "stylesheet";
linkNode.type = "type/css";
linkNode.href = "//cdnjs.cloudflare.com/ajax/libs/sweetalert/0.3.3/sweet-alert.min.css";
document.head.appendChild(linkNode);
虽然这在 Chrome 中工作正常,但 CSS 没有被加载,即使它可以在开发工具中看到。因此,我只是以正常方式链接了 css 文件。谢谢大家花时间阅读我的问题。