parallax effect with slideshow images

Question

I have a site with a full screen slider and I am trying to add a parallax effect, like in this web

For the full screen slider: superslides.js

Parallax effect: stellar.js

The problem: The parallax effect only works width images added in css as a background. But superslider.js only resize images to window size if I add images in the HTML with .

Somebody have use this two plugins with succes? Do you know if I can achieve this with other similar plugin?

Answer 1

Try

http://www.jarallax.com/

This plug in is a bit different than stellar. I work with stellar too, quite often, I still have not figured out a way to incorporate slider in to paralax!

Answer 2

I found a workaround:

Parallax effect: stellar.js Slider: slick carousel

Set the background-image for all carousel's elements, then fire up

$(window).stellar()

I use 'responsive: true' option, and I need to remove 'background-size: cover' from my divs, but everything is working pretty! The only issue, I need to use fade transitions in order to keep background in place. I now, it's a workaround, but this is what I used :D

http://jsfiddle.net/marcomessa/ew2oqfym/

ps drag the slideshow with your mouse or your arrow keys