JS: Link specified in data-href not working in carousel
<p>I have a carousel: <a href="https://jsfiddle.net/qftcjcbp/3/" rel="nofollow"><strong>JS Fiddle</strong></a>. I am trying to figure out how to link each image that appears as the main image to its own page, such that:</p>

<ul>
<li>when I click on the image of the wagon - it goes to wagon.com, </li>
<li>when I click on the image of the heirloom photo - it goes to
heirloom.com,</li>
<li><p>when I click on the image of the woolly - it goes to woolly.com, etc.</p>

<pre><code>      &lt;li&gt;
                    &lt;a href="https://upload.wikimedia.org/wikipedia/commons/e/e9/Baker's-van-r.jpg"&gt;&lt;/a&gt;
                    &lt;a data-href="www.wagon.com"&gt;&lt;/a&gt;
                    &lt;div class="block"&gt;
                       &lt;h2&gt;Wagon wins again&lt;/h2&gt;
                    &lt;/div&gt;
    &lt;/li&gt;


    &lt;li&gt;
                    &lt;a href="https://s-media-cache-ak0.pinimg.com/736x/00/60/ff/0060ff20d110050c0e350c55f7c7f3be.jpg"&gt;&lt;/a&gt;
                    &lt;a data-href="www.heirloom.com"&gt;&lt;/a&gt;
                    &lt;div class="block"&gt;
                        &lt;h2&gt;Heirloom Scareloom&lt;/h2&gt;                                                                 
                    &lt;/div&gt;
    &lt;/li&gt;

    &lt;li&gt;
                    &lt;a href="https://upload.wikimedia.org/wikipedia/commons/7/79/Mammuthus_trogontherii122DB.jpg"&gt;&lt;/a&gt;
                   &lt;a data-href="www.woollies.com"&gt;&lt;/a&gt;
                    &lt;div class="block"&gt;
                        &lt;h2&gt;The Original Wollies&lt;/h2&gt;&lt;br&gt;                                                               
                   &lt;/div&gt;
    &lt;/li&gt;   
</code></pre></li>
</ul>

<p>In the JQuery, I have made use of  `data-href`` to assign the link for each each image.</p>

<pre><code>var imgAlt = $(this).find('img').attr("alt"); //  Get Alt Tag of Image
        var imgTitle = $(this).find('a').attr("href"); // Get Main Image URL
    var imgLink = $(this).find('a').attr("data-href"); // Get Main Image URL
        var imgDesc = $(this).find('.block').html();    //  Get HTML of block
        var imgDescHeight = $(".main_image").find('.block').height();   // Calculate height of block
</code></pre>

<p>However the links do not go to the specified page. Would appreciate any direction on how to deal with this. Where am I going wrong?</p>