Get visible elements currently in viewport without groupCells

[yesh]

Hi @desandro ,

don't know if it is supported in some way, but I wanted to ask help with a issue I'm trying to solve:

I have a carousel with multiple visible elements and wanted to get the current visible elements. in the flickity-viewport.

I can achieve this using groupCells and using the .is-selected class attached to the element in the group.

the problem is that I need the slider to move by one element at a time, and not, for example, in steps of 3 elements using the groupCells option.

Test case: https://codepen.io/anon/pen/oGLjqy

is there a way to do it in a simple way using your plugin's tools or have I to integrate it with something else?

[yaodingyd]

@yesh you mean something like this?

[yesh]

@yaodingyd this could be a good solution, also for the performance part. but it's a lil' bit hardcoded (I have multiple carousels in a page with different numbers of items visible), and it does not work with wrapAround. thank you, however, for giving me a possible solution if nothing comes out!

[yaodingyd]

@yesh No problem. You can check out this demo too (dynamically add class previous and next to the is-selected slide) and change the numbers of is-previous and is-next based on carousel cell's width.

[desandro]

Thanks for opening this feature request. Currently, there is no easy API to get which cells are visible within the viewport. It would require measuring the cells around the selected cell. Definitely doable, but there may be a simpler solution, similar to @yaodingyd's technique of hard-coding how many cells should be able to fit.

Add a 👍 reaction to this issue if you would like to see this feature or code added. Do not add +1 comments — They will be deleted.

[AanchalKapoor15]

Hi @desandro . I have a similar requirement. I'm trying to use flickity with my Angular 5 app. I need to get the cells currently in viewport so that I can perform an action on them. For that I too grouped the cells together and got the is-selected class. Now what is not desirable is that the page dots are mapped to the cell groups instead of being mapped to individual cells. What I need is:

1. Page dots mapped to individual cells
2. Typescript to be informed of which cells are currently in viewport.

Can you please help?

[desandro]

@AanchalKapoor15 for Page dots mapped to individual cells, you can create your own custom navigation UI, except use selectCell to select cells instead of slide groups. As for your second request, that's a bigger feature I'm still debating building out.

[vadim-on-github]

even with groupCells: true it cannot be achieved relying on .is-selected if contain: true and we're on the last slide without a full amount of cells in that slide.

This is a much needed API property :) Thanks for the good work!

[pooriamo]

I created a pull request (https://github.com/metafizzy/flickity/pull/1032) which can handle this.

[gavin310]

Here's some jQuery I came up with to add an is-visible class to slides that are currently within the viewport (full or partially). Maybe it'll help someone:

$( '.slider' ).flickity( {
	cellAlign: 'left',
	prevNextButtons: false,
	contain: true,
	groupCells: true,
	on: {
		scroll: function() {
			var flkty = $( this.element ),
				slides = $( '.slider-slide', flkty );

			var viewport = $( '.flickity-viewport', flkty ),
				viewportBoundsLeft = viewport.offset().left,
				viewportBoundsRight = viewportBoundsLeft + viewport.width();

			slides.each( function() {
				var slide = $( this ),
					slideWidth = slide.width(),
					slideBoundsLeft = slide.offset().left;

				var insideViewportLeft = ( slideBoundsLeft + slideWidth > viewportBoundsLeft ),
					insideViewportRight = ( slideBoundsLeft < viewportBoundsRight );

				slide.toggleClass( 'is-visible', insideViewportLeft && insideViewportRight );
			} );
		},
	},
} );

[stifboy]

Here's some jQuery I came up with to add an is-visible class to slides that are currently within the viewport (full or partially). Maybe it'll help someone:

$( '.slider' ).flickity( {
	cellAlign: 'left',
	prevNextButtons: false,
	contain: true,
	groupCells: true,
	on: {
		scroll: function() {
			var flkty = $( this.element ),
				slides = $( '.slider-slide', flkty );

			var viewport = $( '.flickity-viewport', flkty ),
				viewportBoundsLeft = viewport.offset().left,
				viewportBoundsRight = viewportBoundsLeft + viewport.width();

			slides.each( function() {
				var slide = $( this ),
					slideWidth = slide.width(),
					slideBoundsLeft = slide.offset().left;

				var insideViewportLeft = ( slideBoundsLeft + slideWidth > viewportBoundsLeft ),
					insideViewportRight = ( slideBoundsLeft < viewportBoundsRight );

				slide.toggleClass( 'is-visible', insideViewportLeft && insideViewportRight );
			} );
		},
	},
} );

Is it possible to do the same to only the slide at the center?