WordPress the_title(); внутри слайдера slick

#jquery #wordpress #slick.js

#jquery #wordpress #slick.js

Вопрос:

Для клиента мне нужно создать слайдер slick, который использует пользовательскую навигацию (стрелки). Единственное, что мне нужно в навигации для реализации заголовков WordPress.

Каждый раз, когда вы нажимаете на стрелку, единственное, что нужно изменить, это заголовок следующей предыдущей стрелки. Этот заголовок должен соответствовать the_title(); from WordPress .

Это мой скрипт:

 $('.content-image').slick({
       infinite: true,
       dots: false,
       speed: 300,
       slidesToShow: 1,
       slidesToScroll: 1,
       centerMode: true,
       mobileFirst: !0,
       asNavFor: ".content-image-content",
       responsive: [
         { breakpoint: 1124, settings: { slidesToShow: 3, slidesToScroll: 1 } },
         { breakpoint: 1024, settings: { slidesToShow: 3, slidesToScroll: 1 } },
         { breakpoint: 768, settings: { slidesToShow: 3, slidesToScroll: 1 } },
         { breakpoint: 567, settings: { slidesToShow: 3, slidesToScroll: 1 } }
       ],

    });

    $('.content-image-content').slick({
       dots: false,
       arrows: true,
       infinite: true,
       fade: true,
       speed: 300,
       slidesToShow: 1,
       slidesToScroll: 1,
       prevArrow: '<div class="content-image-arrow prev slick-arrow" style=""><img src="/wp-content/themes/axia/img/icons/next-white.svg"/></div>',
       nextArrow: '<div class="content-image-arrow next slick-arrow" style=""><img src="/wp-content/themes/axia/img/icons/next-white.svg"/></div>',
       asNavFor: ".content-image",
    });
 

Есть ли кто-нибудь в сообществе StackOverflow, кто может помочь мне с этой проблемой?

Ответ №1:

Это был бы скорее «слайдер slick», чем вопрос «worpress» 😉

Тем не менее:

Одним из возможных решений было бы добавить атрибут данных к каждому слайду, содержащему заголовок сообщения.

После этого вам нужно будет добавить функцию обратного вызова «afterChange (slick, currentSlide)» в конфигурацию слайдера slick. Slick вызывает функцию каждый раз, когда посетитель скользит вперед или назад.

Функция обратного вызова может затем

  • извлекает атрибуты данных из слайдов до и после текущего слайда и
  • соответственно изменяет divs с классом «slick-next» / «slick-previous»

С наилучшими пожеланиями из Зальцбурга,

  • Йоханнес