Слайдер с превьюшками с помощью встроенной галереи и Slick

Понадобилось на одном проекте сделать галерею с превьюшками.

Так как это были кастомные записи, и их было много то, решил эту галерею вывести с помощью кастомных полей ACF и слайдера на основе Slick.

Для этого создал дополнительное поле для записи как Редактор Wordpress

В поле добавлял обычную галерею которая есть в редакторе WordPress, а выводил её в шаблоне вывода записи, с помощью PHP-кода или через Oxygen, причем в двух местах, одна за другой (дубль). Только первому присваивал дополнительный стиль: slider-for-jq, а второму: slider-nav-jq.

И через сниппет подключил модуль Slick и прописал стили.

Вот код сниппета с готовым кодом:

// Подключаем библиотеку Slick 
add_action( 'wp_footer', function () { ?>
<style>
    .slider-for-jq div.gallery,
    .slider-nav-jq div.gallery {
        display:flex;
        flex-direction: row;
        width:100%;
    }
    .slider-for-jq div.gallery {
        height: max-content;
        flex-wrap: wrap;
    }

    .slider-for-jq div.gallery figure.gallery-item,
    .slider-nav-jq div.gallery figure.gallery-item {
        margin:0 5px;
    }

    .slider-for-jq div.gallery figure {
        width:100%;
        height: max-content;
    }
    .slider-for-jq div.gallery.slick-slider figure img {
        height: 400px;
        object-fit: cover;
        width: 100%;
    }
    .slider-nav-jq div.gallery figure img {
        width:100px;
        height: 100px;
        object-fit: cover;
        opacity: .5;
        transition:all 0.3s;
    }
    .slider-nav-jq div.gallery.slick-slider figure img {
        width:100%;
    }
    .slider-nav-jq div.gallery figure.slick-active.slick-current img {
        opacity: .95;
    }
    @media only screen and (max-width: 768px) {
        .slider-nav-jq div.gallery figure img {
            height: 50px;
        }
        .slider-for-jq div.gallery.slick-slider figure img {
            height:auto;
        }
    }
</style>
<link rel="stylesheet" type="text/css" href="/wp-content/themes/for_oxygen/plugins/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="/wp-content/themes/for_oxygen/plugins/slick/slick-theme.css"/>
<script type="text/javascript" src="/wp-content/themes/for_oxygen/plugins/slick/slick.min.js"></script>
  <script>
jQuery(document).ready(function(){

// добавляем стили для галереи, чтобы она заработала
jQuery('span.slider-for-jq div.gallery').addClass( 'slider-for' );
jQuery('span.slider-nav-jq div.gallery').addClass( 'slider-nav' );      


//слайдр в проектах 
jQuery('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav'
});
jQuery('.slider-nav').slick({
  slidesToShow: 4,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
    arrows: false,
  dots: false,
  centerMode: true,
  focusOnSelect: true
});


});


// отключение ссылок на иконках галереи   
jQuery('.slider-nav-jq div.gallery figure.gallery-item a').on('click', function (e) {
    e.preventDefault(); // этот код предотвращает стандартное поведение браузера по клику
    // остальной код
    //alert("Мы не перешли по ссылке, а вывели своё сообщение!");
});


  </script>
<?php } );

И еще один момент, для того чтобы по клику на изображение открывалось большое изображение в модальном окне - установил плагин Easy FancyBox. А для навигационных слайдов отключил автоматическое определение ссылок как фансибокс, для этого добавил стиль .slider-nav-jq .gallery-icon a в исключения: