Hello and thank you for contacting the Toolset support.
I previously suggested putting what is inside View Loop in a Container to have (View>ViewOutput>View Loop>Container>etc) so we can have something like the HTML in this example hidden link
But this is not required anymore because the view now generates a wrapper for the loop's content. Check this screenshot hidden link
Now the view generates the following:
<div class="js-wpv-loop-wrapper">
<div class="wp-block-toolset-views-view-template-block wpv-block-loop-item php-to-be-replaced-with-shortcode" data-toolset-views-view-template-block="dc93e5c9d995759b1b0bc802e00be842">...</div>
<div class="wp-block-toolset-views-view-template-block wpv-block-loop-item php-to-be-replaced-with-shortcode" data-toolset-views-view-template-block="dc93e5c9d995759b1b0bc802e00be842">...</div>
<div class="wp-block-toolset-views-view-template-block wpv-block-loop-item php-to-be-replaced-with-shortcode" data-toolset-views-view-template-block="dc93e5c9d995759b1b0bc802e00be842">...</div>
</div>
And you can initialize the slider with code like:
$('#wpv-view-layout-1912 .js-wpv-loop-wrapper').flickity({
// options
cellAlign: 'left',
contain: true
});
Or more precisely, if you have multiple views on the page, by targeting the view's ID attribute that uses the view's ID(1912 in the following example) hidden link
$('#wpv-view-layout-1912 .js-wpv-loop-wrapper').flickity({
// options
cellAlign: 'left',
contain: true
});
You are right, you need to use unformatted loop style.
And regarding pagination, you can choose, between generating all the pages in the first load, or relying upon Toolset pagination. In the latter case, and if you use AJAX pagination, you can rely upon Toolset View's events:
jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
/**
* data.view_unique_id (string) The View unique ID hash
* data.effect (string) The View AJAX pagination effect
* data.speed (integer) The View AJAX pagination speed in miliseconds
* data.layout (object) The jQuery object for the View layout wrapper
*/
});
View's Javascript events are not currently available in the blocks editor interface, even if they do work on the frontend. To see all the available events, you can create a view on the legacy editor, just, to copy/paste the events from it. Check this screenshot hidden link
https://toolset.com/documentation/programmer-reference/adding-custom-javascript-code-to-views-that-use-ajax/
So, as a conclusion:
- No more need to use a container block. The loop, now, generates a wrapper for each of the loop instances.
- Unformatted style for the loop.
- Use frontend events to reinitialize the slider if you are using AJAX.
I hope this answers your questions. Let me know if you have any further questions.
