向emberJS模板页面添加幻灯片

adding a slideshow to emberJS template page

本文关键字：添加 幻灯片 emberJS      更新时间：2023-09-26

EDIT：做了更多的挖掘，emberJS不允许执行内联脚本。我该如何制作幻灯片？我是否创建组件

我刚开始使用emberJS。我遵循了Ember网站上的指南，并在这里学习，但我发现自己陷入了一条死胡同，我需要你的帮助！

情况如下：我想在我的一个模板中添加一个幻灯片。现在，我已经尽我所能，使用"BOWER INSTALL"添加了幻灯片.js和.css，然后编辑了我的"ember-cli build.js"以引用这两个依赖项的app.import。

这是一个基本的网站页面，如"关于我"、"服务"、"联系我们"。没什么新奇的。假设我想将此幻灯片添加到"服务"页面，起初当我访问网站时，它加载时没有任何问题，但当我使用｛｛#link to｝｝功能在模板/页面之间切换时，它会消失，不会再次加载。

有人能解释一下我应该如何在模板上添加内联脚本吗？

对于初学者的问题，很抱歉。

为了运行幻灯片，我需要在页面上的DOM元素之后执行以下脚本

<script type="text/javascript">
      $(window).load(function() {
        $('.flexslider').flexslider();
      });
</script>

HTML如下：

<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="http://placehold.it/350x150/0889d8/000000" />
    </li>
    <li>
      <img src="http://placehold.it/350x150/c1a4f0/ffffff" />
    </li>
    <li>
      <img src="http://placehold.it/350x150/8b4513/000000" />
    </li>
  </ul>
</div>

我试图使用光滑的插件，但遇到了问题。所以我创建了另一个ember插件，它封装了jquery unslider插件。查看ember cli unslider。

请参阅简单的演示。

un-slider组件需要一系列幻灯片。在其块中，您必须定义用于每张幻灯片的HTML内容。

{{#un-slider slides=model as |slide|}}
<img src="{{slide.url}}"/>
{{/un-slider}}

在上面的例子中，model可能看起来像这样：

[
  { url: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=slide 1&w=600&h=400' }, 
  { url: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=slide 2&w=600&h=400' }, 
  { url: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=slide 3&w=600&h=400' }
];

您可以使用已经做到这一点的ember插件：ember-cli slick

使用安装

ember install ember-cli-slick

你可以在你的模板中使用它，如下所示：

{{#slick-slider autoplay=true arrows=false}}
    <div class="box"> <img src="https://static2.businessinsider.com/image/4f3433986bb3f7b67a00003c/a-parasite-found-in-cats-could-be-manipulating-our-brains.jpg"> </div>
    <div class="box"> <img src="https://static2.businessinsider.com/image/4f3433986bb3f7b67a00003c/a-parasite-found-in-cats-could-be-manipulating-our-brains.jpg"> </div>
    <div class="box"> <img src="https://static2.businessinsider.com/image/4f3433986bb3f7b67a00003c/a-parasite-found-in-cats-could-be-manipulating-our-brains.jpg"> </div>
    <div class="box"> <img src="https://static2.businessinsider.com/image/4f3433986bb3f7b67a00003c/a-parasite-found-in-cats-could-be-manipulating-our-brains.jpg"> </div>
{{/slick-slider}}

如果你想学习如何制作幻灯片组件，请查看此处的源代码：https://github.com/laantorchaweb/ember-cli-slick/blob/master/addon/components/slick-slider.js

这只是slick.js插件的一个包装器组件。你也可以对flexflader插件做同样的操作。

相关文章：