0

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:

enter image description here

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:

enter image description here

Mohammad Areeb Siddiqui
  • 9,083
  • 10
  • 62
  • 108
Ahmad
  • 11,274
  • 24
  • 79
  • 132
  • 4
    i think you never call $('.div').cycle(), look on their site for examples how to do this. Dont have time to create a working jsFiddle now sorry, hope this helps – retanik Jul 23 '13 at 14:12

1 Answers1

0

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/

Community
  • 1
  • 1
Chris Rockwell
  • 1,664
  • 1
  • 17
  • 24
  • Thanks .. Can you update the code though, so that the animation is the same a that used in the original page ? (See the bottom portion of OP to see where the original is) .. I really like that effect ! :) – Ahmad Jul 23 '13 at 14:32
  • It's updated to show the same type of scrolling. The easeInOutBack will get you the jumpy effect (for lack of a better phrase) – Chris Rockwell Jul 23 '13 at 14:44
  • If I try that code, it doesn't show any testimonial text .. Try it yourself, you'll see what I mean .. – Ahmad Jul 23 '13 at 14:48
  • OK. I see that something is adding inline style your div's – Chris Rockwell Jul 23 '13 at 15:03