Clever Geek Handbook

Spotted carousel with parallax elements

I tried to create custom parallax where user clicks left / right using a smooth carousel.

Though it needs to be enlarged even more to reset invisible images.

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

Tried using the: visible selector but I dont feel its effect.

  • How would you stabilize this carousel so that items don't float off. Reset invisible items so they can track?

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

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

+3


source to share


1 answer


this is an example of parallax animation in the opposite direction of movement. Although I'm not sure how you would set parallax while dragging / while swiping - instead of swiping after / before it finishes.

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);
 });
+1


source






More articles:


All Articles