Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Ember.js Models Loading Arrays of JavaScript objects

Posted by lapo ristor
lapo ristor
399 Points

How run a jquery plugin ( or multiple plugins) in an ember website app?

Where I can insert the plugins ( slider or carousel )

1 Answer

ellie adam
ellie adam
26,377 Points
ellie adam
ellie adam
26,377 Points

Hi Lapo, This is really good article about ember.js http://bigemployee.com/9-things-you-should-know-before-starting-your-next-ember-js-and-ember-data-application/

How to use it:

  1. Load jQuery library and the jQuery carousel ticker plugin at the bottom of the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script src="javascripts/jquery.carousel-ticker.js"></script>

  1. Create a list of ticker items and the wrap them into a DIV container.
<div class="carouselTicker">

  <ul class="carouselTicker__list">

    <li class="carouselTicker__item">1</li>

    <li class="carouselTicker__item">2</li>

    <li class="carouselTicker__item">3</li>

    <li class="carouselTicker__item">4</li>

    <li class="carouselTicker__item">5</li>


  </ul>

</div>


3. Style the carousel ticker whatever you want.


.carouselTicker {

  overflow: hidden;

  float: none;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  -o-user-select: none;

  user-select: none;

}
.carouselTicker__list {

}

.carouselTicker__item {

}
4. Call the carouselTicker() function on the container element to enable the plugin.

1
$(".carouselTicker").carouselTicker();

5. Adjust the scrolling speed and orientation in the JavaScript.

view source
01
$(".carouselTicker").carouselTicker({

// animation speed

speed: 1,

// animation delay

delay: 30,

reverse: false

});