Question

我正在WP_Query循环中的WP站点中使用Flexslider（jquery）在特定类别中创建帖子的滑块。该滑块为每个帖子/幻灯片拉入帖子标题和内容。我正在使用自定义导航功能，因此上，下一个箭头按钮会在幻灯片更改时为每张幻灯片追加上一个和下一个帖子标题文本-与approved answer on this thread类似。

我的设置：

function setText(slider) {
    var prev = slider.currentSlide - 1, // in case slider does not strat at 0
        next = slider.currentSlide + 1;

    if (prev < 0) {
        prev = slider.slides.length - 1;
    }

    if (next == slider.slides.length) {
        next = 0;
    }

    $('#prev-link h6.title').text($(slider.slides[prev]).find( "h2" ).text());
    $('#next-link h6.title').text($(slider.slides[next]).find( "h2" ).text());
						
}
		
	$('#prev-link').on('click', function (slider) {
    $('.flexslider').flexslider('prev')
    return false;
})

	$('#next-link').on('click', function (slider) {
    $('.flexslider').flexslider('next')
    return false;	
})

  $('.flexslider').flexslider({
    animation: "fade",
	  slideshowSpeed: 7000, 
	  animationSpeed: 1000, 
	  controlsContainer: ".bottom-pag",
	  directionNav: false, 
	  controlNav: false,
	  start: function (slider) {
        setText(slider);
    },
	 after: function (slider) {
        setText(slider);
    },
  });

<div id="bottom-info" class="bottom-pag">
<div class="side left-side">
  <a id="prev-link" href="#">
    <h6><span><svg id="left-arrow" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 63 19"><defs><style>svg#left-arrow, svg#right-arrow .cls-1{fill:#f09905;}</style></defs><polygon class="cls-1" points="17.5 18.74 17.5 12.29 61.5 12.29 61.5 6.29 17.5 6.29 17.5 0.26 1.5 9.5 17.5 18.74"/></svg></span>last
      feature</h6>
    <h6 class="title">previous post title goes here</h6>
  </a>
</div>


<div class="side right-side">
  <a id="next-link" href="#">
    <h6>next feature<span><svg id="right-arrow" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 63 19"><defs></defs><polygon class="cls-1" points="61.5 9.5 45.5 0.26 45.5 6.29 1.5 6.29 1.5 12.29 45.5 12.29 45.5 18.74 61.5 9.5"/></svg></span></h6>
    <h6 class="title">next post title goes here</h6>
  </a>
</div>
</div>

我的问题是，上一张和下一张导航文章标题不会在幻灯片更改的同时更新。上一个和下一个导航文章标题文本仅在幻灯片淡入后之后更新。我试图使上/下一个导航文章标题文本在幻灯片淡入的同时进行更新我尝试使用'before'flexslider函数而不是'after'更新prev / next导航文本，该文本说它与每个滑块动画异步触发，但是不起作用，因为它使下一个导航文章标题变为与当前幻灯片的帖子标题相同。

是否有关于如何在每张幻灯片更改的同时更新上一个/下一个导航帖子标题的想法？

谢谢

WordPress发布循环中的Jquery Flexslider自定义上一个/下一个箭头文本

0 个答案: