Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
neuhaus3000

Building a responsive full width slider (carousel)?

Recommended Posts

Hi all, 

 

I have to build a responsive full width (not height) tabbed slider with GSAP.

Anyone has tried this kind of project?  Any ideas will be appreciated.

 

Thanks!

 

neuhaus3000

Link to comment
Share on other sites

It is not extremely difficult to achieve something like this.

 

You could try and attach some logic into the resize event.

$(window).resize(function(){
   // resize container here
});

Then for the slider you could setup your animation to animate left/right according to the full-width of the browser. Like follows:

// sliding right to left
function slideNext(){
   TweenMax.to(container, 1, {marginLeft: "-="+$(window).innerWidth()});
}

// sliding left to right
function slidePrev(){
   TweenMax.to(container, 1, {marginLeft: "+="+$(window).innerWidth()});
}

*Provided that the "containers" inside the main slider span for the full browser width.

Link to comment
Share on other sites

Hey guys,

 

Thanks for the info!

I will look into this.

 

Kind Regards,

 

neuhaus3000

  • Like 1
Link to comment
Share on other sites

  • 4 weeks later...

Hey guys,

 

Thanks for the info!

I will look into this.

 

Kind Regards,

 

neuhaus3000

 

Hi neuhaus3000, I have to build a responsive carousel and I found this topic. I was wondering if you were able to build it. Thanks!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×