静态背景中的位置滑块活动图像

Question

我正在尝试将滑块活动图像放在背景图像中。我附上了一个示例图形布局。我需要和想法和可能的js库来做到这一点。

滑块应移动到iphone图像后面。只有活动图像才能显示在iphone背景中。谁能帮忙提一个建议？感谢

CSS

.bxslider-slide {
  min-height: 350px;
}
.active-slide {
  border: 10px solid transparent;
  padding: 15px;
  -webkit-border-image: url(http://pngimg.com/upload/iphone_PNG5729.png) 30 stretch; 
  -o-border-image: url(http://pngimg.com/upload/iphone_PNG5729.png) 30 stretch; 
  border-image: url(http://pngimg.com/upload/iphone_PNG5729.png) 30 stretch;
}

JS

$('.bxslider').bxSlider({
   slideWidth: 200,
   minSlides: 1,
   maxSlides: 5,
   moveSlides: 1,
   slideMargin: 10,

   onSliderLoad: function () {
     $('.bxslider>li:not(.bx-clone)').eq(3).addClass('active-slide');
   },
   onSlideAfter: function ($slideElement, oldIndex, newIndex) {
    $('.bxslider-slide').removeClass('active-slide');
    $($slideElement).next().next().next().addClass('active-slide');
   }
 });

HTML

<div class="slider-wrap">
  <ul class="bxslider">
    <li class="bxslider-slide"><img src="http://clipart-library.com/data_images/459894.png" /></li>
    <li class="bxslider-slide"><img src="http://www.clipartbest.com/cliparts/dT6/enK/dT6enKMnc.svg" /></li>
    <li class="bxslider-slide"><img src="http://clipart-library.com/data_images/459894.png" /></li>
    <li class="bxslider-slide"><img src="http://www.clipartbest.com/cliparts/dT6/enK/dT6enKMnc.svg" /></li>
    <li class="bxslider-slide"><img src="http://clipart-library.com/data_images/459894.png" /></li>
    <li class="bxslider-slide"><img src="http://www.clipartbest.com/cliparts/dT6/enK/dT6enKMnc.svg" /></li>
 </ul>
</div>