Flexslider拇指与顶部的箭头

Question

我在项目中使用Flexslider，需要让它看起来像下面的图像：

这是我到目前为止提出的 SEE DEMO

唯一缺少的是活动缩略图顶部的蓝色箭头。我设法得到了蓝色边框，但却无法弄清楚如何在上面放置箭头。

有什么想法吗？

HTML

<div id="smallslider" class="flexslider">
        <ul class="slides">
          <li data-thumb="images/thumb1.jpg">
          <a class="sliderlink" href="#"> 
          <div class="smallslider-thumb"><img src="images/small_slide1.jpg"></div>
          <div class="smallslider-header">Infra Red Dedo LEDzilla Onboard light <span>Lighting for Hire</span></div>
          </a>
          </li>
          <li data-thumb="images/thumb2.jpg">
          <a class="sliderlink" href="#"> 
          <div class="smallslider-thumb"><img src="images/small_slide2.jpg"></div>
          <div class="smallslider-header">Infra Red Dedo LEDzilla Onboard light <span>Lighting for Hire</span></div>
          </a>
          </li>
        </ul>
      </div>

CSS

#smallslider .flex-control-thumbs li {
    width: auto;
    margin: 6px 12px 0;
    -moz-box-sizing:    border-box;
   -webkit-box-sizing: border-box;
    box-sizing:        border-box;
}
#smallslider .flex-control-thumbs .flex-active {
    opacity: 1; cursor: default;
    border: 4px solid #2a80b9;
    margin: -2px;
}
#smallslider .flex-control-thumbs {
    margin: 32px 50px 0;
    position: static;
    overflow: hidden;
}
#smallslider .slides img {
    width: auto;
    display: block;
}
img.flex-active {

}