adding a slideshow to emberJS template page

Question

EDIT: Did some more digging around and emberJS doesn't allow inline script execution. How would I go about creating a slideshow? Do I create a component?

I've only started out with emberJS. I've followed the guides on the website by Ember and looked on here to learn, but I've found myself in a bit of a dead end and I need your help!

This is the situation: I want to add a slideshow to one of my templates. Now, to the best of my abilities I have added the slideshow .js and .css using 'BOWER INSTALL' and then edited my 'ember-cli-build.js' to reference the app.import for those two dependencies.

It's a basic website pages such as 'About Me', 'Services', 'Contact Us'. Nothing fancy. Say I want to add this slideshow to the 'Services' page, at first when I visit the site it loads up with no issues but when I switch between the templates/pages using {{#link-to}} function it disappears and won't load again.

Can anyone explain how I should add inline scripting on templates?

Sorry for the beginners question.

In order for me to run the slide show I need to execute the following script after the DOM elements on the page.

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

The HTML is as follows:

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

Answer 1

I tried to use the slick addon, but ran into issues with it. So I created another ember addon that wraps the jquery unslider plugin. Check out ember-cli-unslider.

See the simple demo.

The un-slider component expects an array of slides. Within its block you must define the HTML content used for each slide.

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

In the above example, model could look like this:

[
  { 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' }
];