Targeting a Specific Slide from a Text Link in AnythingSlider

Question

I've gotten AnythingSlider working just fine but I'm looking to be able to provide text links at the top of my page to the exact slide. I've found other posts that suggest ways to do it but I think my method adds more complexity that I'm not understanding how to address.

I have a link at the top of my page like so:

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

I have created the anchor for the part of the page where the slider is as so:

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

Immediately below this is the AnythingSlider

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

What I'm looking to do is have the link take the user to the anchor section of the site like you would expect but then also have the correct slide, in this case #panel1-3, loaded up at the same time.

I know the slide is panel1-3 because if I leave the hashTags AnythingSlider option to "true" the address bar refreshes and shows me the URL is www.mysite.com/&#panel1-3.

Is what I'm trying to do possible?

Here's one of the posts I tried working from: Clicking link changes url in browser bar, but doesn't actually load URL (may be AnythingSlider related)

Answer 1

First off, the link above appears malformed. It should look like this:

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

Then, in your case, I wouldn't use the default hashTags method because you'll need a custom one. Check out this demo, it's from the Home wiki page of the documents (fourth link under "Navigation", but I've updated it using your layout), and it uses this code:

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>

Script

$(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;
    });

});