Slick carousel with parallax elements

Question

I've tried to create a bespoke parallax when the user swipes left/right, using the slick carousel.

Although need to enhance it further so the unseen images reset.

$(this).find(".parallaxback img:visible").animate({
   left: increment+"=15"
}, 700, function() {
   // Animation complete.
});

Tried to use the : visible selector, but I don't feel its having an effect.

• How would you stabilize this carousel so the elements don't float off. Reset the unseen items so they can keep on track?

• Also - is there a way to move the items during a slide?

  http://jsfiddle.net/ayve1nmf/25/

Answer 1

this an example with parallax animating in reverse to the movement. Although I'm not sure how you would set the parallax during a drag/during the swipe movement -- instead of after/before its finished the swipe.

http://jsfiddle.net/ayve1nmf/27/

var parallaxAnimate = function(el, currentSlide, nextSlide){
    console.log("parallax animate");

    var increment = "+";

     if (currentSlide > nextSlide) {
         increment = "-";
     }

     $(el).find(".parallaxback img:visible").animate({
         left: increment + "=15"
     }, 400, function () {
         // Animation complete.
     });       
};


 // On before slide change
 $('.data').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
    console.log("beforeChange");
     //console.log(nextSlide);
     parallaxAnimate(this, currentSlide, nextSlide);
 });