href for images

[jay4linux]

I am trying to wrap img sliders with href, but it is not working.
Here is the html

 <div id="slidr" style="display: inline">
            <span data-slidr="one"><a href="/documents/membership/newmemberhandbook.pdf"  target="_blank"><img  src="/images/sp_sliders/NewMember1.jpg"></a></span>
            <a data-slidr="two" href="/cig/home/#national-convention"><img  src="/images/sp_sliders/2015con.jpg"></a>
            <img data-slidr="three" src="/images/sp_sliders/leadership.jpg">
            <img data-slidr="four" src="/images/sp_sliders/PIZZABOX.jpg">
        </div>

Here is the javascript

<script>
    var s = slidr.create('slidr', {
        'controls': 'border',
        fade: false,
        keyboard: true,
        overflow: true,
        pause: false,
        theme: '#222',
        timing: { 'cube': '0.5s ease-in' },
        touch: true,
        transition: 'cube'
    });
    s.add('h', ['one', 'two', 'three', 'four', 'one']);
    s.auto();
</script>

Any suggestions. I love how simple this slider is to use

[jay4linux]

I tried changing html to

<span data-slidr="one">
<img id="slidr1" src="/images/sp_sliders/NewMember1.jpg"
onclick="window.location.href='/documents/membership/newmemberhandbook.pdf'; return false;">
            </span>

No luck with that either.

[medeaggd]

Hopefully, you have long ago solved this, but I'm going to respond since it's still open.

1. You should have the image sources begin with "." in HTML -> <img data-slidr="three" src="./images/sp_sliders/leadership.jpg">
2. Not certain, but I think the slides need to be identified in the same media type - not sure you can combine the span, anchor, and image tags to all be the data-slidr's for this API.

[jay4linux]

Yes, it has been solved.