Building a responsive full width slider (carousel)?

[neuhaus3000]

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

[Carl]

Hi neuhaus3000,

 

Perhaps you will find the concepts discussed here helpful: http://greensock.com/gsap-1-13-1

[Michael71]

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.

[neuhaus3000]

Hey guys,

 

Thanks for the info!

I will look into this.

 

Kind Regards,

 

neuhaus3000

[fila79]

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!

[neuhaus3000]

Hey Fila,

 

Nope!  I used a slick plugin name Slick Slider! http://kenwheeler.github.io/slick/

Very easy to use! 

 

Kind Regards,

 

neuhaus3000

[fila79]

Thanks! I'll check it out.