How to use swiper with alternative html layout

[bielze]

I'd like to use swiper for a wordpress query but I don't have control over the classes of the html layout. So the html doesn't have the classes required by swiper (swiper, swiper-wrapper and swiper-slide).

Do I write a script to add the classes to the html before initialising swiper or is there another way to have swiper use other classes?

[onetrev]

The new (since WP 6.2) WP_HTML_Tag_Processor makes this pretty easy! Well first of all, you can add the classes (swiper and swiper-wrapper) to the Query Loop and Post Template respectively in the editor. That's the easy part.

The tricky part is getting swiper-slide class in there. The query creates an <li> that you can't easily add the class to. That's where the above Tag Processor comes it. And it's quite performant as well. So something like this will do what you need:

function add_class_to_query_loop_items($block_content, $block)
{
  if ($block['blockName'] === 'core/query') {
    $processor = new WP_HTML_Tag_Processor($block_content);

    while ($processor->next_tag('li')) {
      $existing_class = $processor->get_attribute('class');
      $new_class = $existing_class ? $existing_class . ' swiper-slide' : 'swiper-slide';
      $processor->set_attribute('class', $new_class);
    }

    return $processor->get_updated_html();
  }
  return $block_content;
}
add_filter('render_block', 'add_class_to_query_loop_items', 10, 2);

Just keep in mind the above will add that class to every query loop. Probably not an issue, but you may want to see if you can target just the specific query loop in question. :_)