CODEWITHSUNDEEP
jquerywordpressslick.js
Dionoh
Dionoh

Reputation: 406

Wordpress the_title(); inside slick slider

For a client, I need to create a slick slider that uses custom navigation (arrows). The only thing is in the navigation I need to implement WordPress titles.

Every time you click on an arrow the only thing that needs to change is the next en prev arrow title. This title needs to correspond to the the_title(); from WordPress.

This is my script:

$('.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",
    });

Is there anyone in the StackOverflow community that can help me out with this problem?

Upvotes: 1

Views: 336

Answers (1)

jjarolim
jjarolim

Reputation: 121

That would be more a "slick slider" than a "worpress" question ;-)

Nevertheless:

One possible solution would be to add a data-attribute to every slide containing the title of the post.

After that, you would have to add an "afterChange(slick,currentSlide)" callback function to the slick slider configuration. Slick calls the function every time the visitor slided forward or backwards.

The callback function could then

  • retrieves the data-attributes from the slides before and after the current slide and
  • changes the divs with the class "slick-next" / "slick-previous" accordingly

Best regards from Salzburg,

  • Johannes

Upvotes: 1

Related Questions