Как я могу интегрировать слайдер «При наведении курсора» в пользовательскую тему WordPress?

Question

Я подготовил ползунок «При наведении курсора» (https://hovslide.digitalsolutioner.com/, это второй с JS), который я хочу интегрировать в пользовательскую тему Wordpress.

У меня есть некоторые трудности с адаптацией кСлайдер, я хотел бы иметь первые пять изображений контента, показанных на слайде.Я думаю, что мне нужно изменить массивы (color1, color2, color3, color4, color5) в общем виде, совместимом с Wordpress.

<!-- from front-page.php -->
<div class="row">

        <?php
        }
        ?>

        <div class="col-md-4 px-0">

          <div class="container container-content">

              <a href="<?php the_permalink(); ?>" class="card mx-2 mb-6">
                <?php the_post_thumbnail('antonellotrio_single', array( 'id' => 'firstImg', 'class' => 'card-img-top img-fluid align-middle animated fadeIn duration-3s delay-2s', 'alt' => get_the_title() ))?>
                <div class="card-body">
                  <h2 class="card-title px-6"><?php the_title(); ?></h2>
                </div>
              </a>

          </div>

        </div>
        <!-- increment the loop BEFORE we test the variable -->
        <?php $i++;
        if($i != 0 && $i % 3 == 0) { ?>
</div>

Моя цель - создать сайт Wordpress с ползунком наведения в доме, какэтот пример: https://www.defactoinc.com/styling/jessica-bobince/overview

Спасибо за помощь, если вам нужны другие коды или разъяснения, я доступен!

Лучший!Карло