CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Kyle Horkley
Kyle Horkley

Reputation: 1001

Animate scroll 100% (horizontal)?

On my page (apolloedge.com/beta/port.html), I have 2 buttons: one that I want to scroll left onclick and one that I want to scroll right onclick, respectively. The container element has the id of #header2. The child element has a class of .showc. This element (.showc) has a width of 100%. How can I make it so that the buttons scroll 100% (animated) onclick using JavaScript and/or jQuery? Thanks a bunch for the help!

Upvotes: 0

Views: 560

Answers (2)

Kyle Horkley
Kyle Horkley

Reputation: 1001

I ended up using a library called Cycle2. http://jquery.malsup.com/cycle2/

Upvotes: 0

Vicente Jr Yuchitcho
Vicente Jr Yuchitcho

Reputation: 11

You can use CSS3 transition property to animate the image containers like so:

.showc {
  display: inline-block;
  height: 100%;
  position: relative;
  width: 100%;
  transition: all 0.6s ease-in-out; 
}

Then your left or right directional onclick handler change the margin-left value of the first .showc.

Upvotes: 1

Related Questions