Question

我已经让AnythingSlider工作得很好，但我希望能够在页面顶部提供完全幻灯片的文本链接。我发现其他帖子提示了如何做到这一点，但我认为我的方法增加了更多的复杂性，我不理解如何解决。

我的页面顶部有一个链接，如下所示：

<a href="#learn</>Learn More</a>

我已经为滑块所在的页面部分创建了锚点：

<a id="learn"></a>

紧接着这是AnythingSlider

<div id="slider">
  <div>Slide 1</div>
  <div>Slide 1</div>
  <div>Learn More Slide</div>
</div>

我要做的是让链接将用户带到网站的锚点部分，就像你期望的那样，但是也有正确的幻灯片，在这种情况下＃panel1-3，同时加载

我知道幻灯片是panel1-3，因为如果我将hashTags AnythingSlider选项保留为“true”，地址栏会刷新并显示URL为www.mysite.com/&#panel1-3。

我正在尝试做什么？

这是我尝试过的帖子之一： Clicking link changes url in browser bar, but doesn't actually load URL (may be AnythingSlider related)

Answer 1

首先，上面的链接显示格式不正确。它应该是这样的：

<a href="#learn">Learn More</a>

然后，在您的情况下，我不会使用默认的hashTags方法，因为您需要自定义方法。查看this demo，它来自文档的Home wiki page（“导航”下的第四个链接，但我已使用您的布局更新了它），并使用此代码：

HTML

<nav>
    <!-- added class="link" in case you have links that are not tied to the slider -->
    <a href="#cat" class="link">cat</a>
    <a href="#grey" class="link">grey</a>
    <a href="#bear" class="link">bear</a>
    <a href="#random" class="link">random</a>
    <a href="#dog" class="link">dog</a>
</nav>

<div id="slider">
    <div id="cat">
        <img src="http://placekitten.com/300/200" alt="" />
    </div>
    <div id="grey">
        <img src="http://placehold.it/300x200" alt="" />
    </div>
    <div id="bear">
        <img src="http://placebear.com/300/200" alt="" />
    </div>
    <div id="random">
        <img src="http://lorempixel.com/300/200" alt="" />
    </div>
    <div id="dog">
        <img src="http://placedog.com/300/200" alt="" />
    </div>
</div>

脚本

$(function () {
    $('#slider').anythingSlider({
        hashTags: false,
        // Callback when the plugin finished initializing
        onBeforeInitialize: function (e, slider) {
            var hash = window.location.hash;
            if (hash && $(hash).length) {
                slider.options.startPanel = $(hash).closest('.panel').index() + 1;
            }
        },
        onSlideComplete: function (slider) {
            // if you use slider.$currentPage[0].id, you'll need
            // to add an ID to each panel (<div id="cat">)
            window.location.hash = '#' + slider.$currentPage[0].id;
        },
    });

    $('a.link').click(function () {
        $('#slider').anythingSlider($(this).attr('href'));
        return false;
    });

});

从AnythingSlider中的文本链接定位特定幻灯片

1 个答案: