onScroll method with force = true

[hellor0bot]

I'm trying to get parallax on slides inside a carousel.

Since there are slides that are out of viewport, Jarallax doesn't recalculate them on scroll. Hence I'm triggering carouselSlide.jarallax('onScroll'); after each slide change. But it doesn't effect slides outside the viewport.

Is there a way to force recalculation of slides outside the viewport with carouselSlide.jarallax('onScroll'); by enabling force: true somehow?

[hellor0bot]

I think I found an even better solution.

It would be so great if we had a container option:

owlSlide.jarallax({
  container: '.carousel'
});

Sometimes, like in the situation with a carousel with hidden slides, there might be several parallax instances inside one container that are hidden but have to be recalculated onScroll.

We could check if the container is in the viewport, instead of checking each instance individually.

What do you think?

[Nikita]

Your solution will works for carousels with 1 visible item, but what if visible 2 or more items in the row? In this scenario will be calculated wrong image sizes.

[hellor0bot]

@nk-o, it's exactly what I'm trying to explain:

If we had container parameter, then even if slides 1 and 5 are outside the viewport, parallax effect would still be applied to them.

[Nikita]

ah, I understand.
We should define not "container" option, but maybe custom isInViewport function to change check code.

[hellor0bot]

I think an option would be better. It can be called something else, not container, like elementInViewport.

Then jarallax will check if the given element is in viewport and not the jarallax container itself.

What do you think?

[Nikita]

Only 1 thing. If we add this option elementInViewport: '.carousel'. Which of available carousels should use jarallax? On the page we can have more then 1 item with .carousel classname.

We can use jQuery / dom for elementInViewport option. I think this example will work for carousels:

$('.jarallax-for-carousel-item').each(function () {
   var $container = $(this).parents('.carousel:eq(0)');
   $(this).jarallax({
      elementInViewport: $container
   });
});

Today I will add this option and let you know.

[hellor0bot]

@nk-o, great suggestion. Looking forward to it!

[Nikita]

You can try new jarallax version

[hellor0bot]

Thanks a lot, works like a charm!

Please correct the docs though: the option is elementInViewport, not isElement....

[Jiannis Sotiropoulos]

how would this work with the data-attribute?
I'm using this slider (http://kenwheeler.github.io/slick/) but when moving the carousel, the next image is invisible until i scroll.

<div class='slick-gallery image' data-slick='{"slidesToShow": 1, "slidesToScroll": 1}'>
<?php			
foreach( $images as $image ): 
	echo "<div data-jarallax data-speed='0.2' data-element-in-viewport='.jarallax-img' data-img-size='cover' data-img-position='0 0' class='jarallax image'><img class='jarallax-img' src='" . $image['sizes']['large'] . "'/></div>";
endforeach;
?>				
</div> 

[Faraz Umer Ata]

@robojiannis Did you find out how to use it with data attributes