adding a slideshow to emberJS template page

0
votes

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>
2
javascriptember.jsember-cliflexslider

2 Answers

3
votes

You can use an ember addon that already does that: ember-cli-slick

Install it using :

ember install ember-cli-slick

You can use it in your template like this:

{{#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}}

If you want to learn how to make a slideshow component look at the source code here: https://github.com/laantorchaweb/ember-cli-slick/blob/master/addon/components/slick-slider.js

This is just a wrapper component for the slick.js plugin . You would do the same for the flexslider plugin.

3
votes

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