Anchor <a> tags are not working in slider

Question

There is a slider at the top of the page. Each slide has a layer of list and anchor tags with image tag inside.

https://www.rakuten.ne.jp/gold/yanosp-fineplay/

Here is the HTML code for the slider part.

<div class="slider">
    <ul class="bxslider">
        <li>
            <a href="https://item.rakuten.co.jp/yanosp-fineplay/rundayspack/" target="_blank"><img alt="ランデイズパック　リュック" src="sliderimg/rundaysslider.jpg" /></a>
        </li>
        <li>
            <a href="https://item.rakuten.co.jp/yanosp-fineplay/y002/" target="_blank"><img alt="" src="sliderimg/porchn.jpg" /></a>
        </li>
        <li>
            <a href="https://item.rakuten.co.jp/yanosp-fineplay/p17fw-sl013/" target="_blank"><img alt="" src="sliderimg/slider13.jpg" /></a>
        </li>
    </ul>
</div>

As you can see, each anochor tag has target="_blank" and it's supposed to open a new tab for a new page. However, clicking won't open the link, let alone a new tab. I was wondering if this has something to do with z-index or something, but what's weird is that, if you go ahead and hover each image in slider, the link still appears. I just can't figure out why this is happening, and any helps would be greatly appreciated.

Thank you so much.

PS - I do not think this has something to do with bxslider plugin, so please refrain from just commenting something like "Try other slider js"

Answer 1

I think this is how the bxslider.js plugin works, When you click, the action is working on the bxslider.js plugin slidering instead of clicking the link.

but when you alread slider to other picture, the clicking anchor action is working. try it!

sorry for poor english.