Our 2nd Tier team has worked on this and it wouldn't be easy to support the slider block on an archive template that has AJAX pagination.
I thought about a workaround, but it would not be easy to implement it for archives. Especially for taxonomy archives.
The workaround consists of using a legacy content template to generate an HTML markup that can support supports a Bootstrap carousel. hidden link
Check this content template and the custom Javascript code inside of it hidden link
<div id="carousel-[wpv-post-id]" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
[wpv-for-each field="wpcf-slider"]
<div class="carousel-item">
<!-- img class="d-block w-100" src="..." alt="First slide" -->
[types field="slider"][/types]
</div>
[/wpv-for-each]
</div>
<a class="carousel-control-prev" href="#carousel-[wpv-post-id]" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-[wpv-post-id]" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Javascript code:
jQuery('.carousel').each(function(){
var carousel = jQuery(this);
carousel.find('.carousel-item:first').addClass('active')
carousel.carousel()
})
The custom Javascript code makes the first image active, then initialize the Bootstrap carousel.
This will work for the first page load. When the AJAX pagination completes, we'll need to run this code again to initialize the new page carousels.
Views do have a Javascript API that allows that. Read more about it here https://toolset.com/documentation/programmer-reference/adding-custom-javascript-code-to-views-that-use-ajax/
You can check an example here hidden link
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
*/
jQuery('.carousel').each(function(){
var carousel = jQuery(this);
carousel.find('.carousel-item:first').addClass('active')
carousel.carousel()
})
});
However, for archive templates there is no similar API. To workaround it, we can hook into the AJAX request, wait for it until it completes and wait an additional time to let it update the results, then we can run the Javascript code. Something like:
jQuery('.carousel').each(function(){
var carousel = jQuery(this);
carousel.find('.carousel-item:first').addClass('active')
carousel.carousel()
})
But, this will only work for pages when they are paged the first time. If they are paged again, Toolset won't perform the AJAX request, and will use its own cache. The code won't be run.
If the archive template is only for post type, and not for taxonomies, you can disable the archive for the custom post type, and use a page and a view for it.
I hope this makes sense. Let me know if you have any questions.
