首页 > 解决方案 > flexslider 的深度链接问题

问题描述

我正在使用 flexslider 来显示自定义帖子类型的帖子。通过将帖子 ID 添加到每个 li 元素并使用它在单击上一个/下一个时使用该 ID 更新 URL,我已经设法使深层链接正常工作。

但是,当它在浏览器中被拉起时,我无法让这个新链接工作。例如,目标是使用此 url 在 facebook 上共享。当有人点击网址时,它应该转到该特定幻灯片。

$(document).ready(function(){
    var $flexslider = $('.flexslider');     
                $flexslider.flexslider({
before:function (slider) {
          // get the ID of the slide we are animating to
          id = slider.slides[slider.animatingTo].id 
          // set the URL path to #slideID     
          history.pushState(null, null, "#" + id);
          },
                animation: "fade",
                                touch: false,
                                slideshow: false,
                manualControls: ".flex-control-nav li",
                useCSS: false /* Chrome fix*/               
});
});

<section id="slider">
      <div class="flexslider">
        <ul class="slides">
        <?php query_posts(array('post_type' => 'juweel','orderby' => 'rand')); if(have_posts()) : while(have_posts()) : the_post();?>
            <li data-thumb="<?php the_post_thumbnail_url(); ?>" class="slide" id="<?php the_ID(); ?>">
            <?php the_title(); ?>
            <?php the_post_thumbnail(); ?>
          </li>
        <?php endwhile; endif; wp_reset_query(); ?>
        </ul>
    </div>
</section>

我知道我可以通过使用获取当前位置哈希

var hash = window.location.hash;

但我不知道如何检查该值是否与我的一张幻灯片的 id 匹配并让它去那里

标签: javascriptphpwordpressflexslider

解决方案


推荐阅读