jQuery Cycle plugin not working

Question

There is a website in which there's a section which I'm trying to replicate within JSFiddle and play around with it.

One thing that I'm having trouble with is this:

These two small <- -> buttons are used to switch between testimonials. This switching is being done by jQuery Cycle Plugin .

The problem is that I can't get these buttons to work within JSFiddle.

I have imported the same jquery.cycle.all.2.74.pack.js file used on the original website, and have also added jQuery. So I don't know what else is missing.

My JSFiddle Replica: http://jsfiddle.net/ahmadka/FsSxd/

Original Website: http://bit.ly/16447fr (To avoid search engine indexing)

This is where these <- -> buttons are used on the original Website:

Answer 1

A couple of things were needed to get this functioning correctly. First of all, you were never calling cycle() :

$('.scrollable4 .items').cycle({
  timeout: 0, 
  next: '.next',
  prev: '.prev',
  fx: 'scrollRight',
  easing:  'easeInOutBack' 
})

Secondly, to mimic the effect you're looking for, you need the easing.js plugin (see external resource in jsfiddle linked below).

Finally, within your CSS, you can't float the elements, they need to be absolutely positioned and given a height of 100%.

#divleftcontent2 .scrollable4 .items {
  position: absolute;
  height: 100%;
}

There are other ways to fix the height issue but that is a different question.

I have updated the fiddle to show what I think is the final version you are looking for: http://jsfiddle.net/FsSxd/8/