bxslider pagerをサムネイルにする方法

<script type="text/javascript">
$(function() {
$('#sample').bxSlider({
pagerCustom: '.custom-thumb'
});
});

$(function() {
// サムネイルのサイズ
var thumbWidth = 160;
var thumbHeight = 100;

// サムネイルの作成
var insert = '';
for (var i = 0; i < $('#sample li').length; i++) {
insert += '<a data-slide-index="' + i + '" href="#"><img src="' + $('#sample li').eq(i).children('img').attr('src') + '" width="' + thumbWidth + '" height="' + thumbHeight + '" /></a>';
};
$('.custom-thumb').append(insert);

$('#sample').bxSlider({
pagerCustom: '.custom-thumb',
});
});
</script>

<ul id="sample">
<?php if(have_rows('image_archive')): ?>

<?php while(have_rows('image_archive')): the_row(); ?>

<?php
$img = get_sub_field( 'image' );
$url = $img['sizes']['medium'];
$alt = $img['alt'];
?>

<li><img src="<?php echo $url;?>" alt=""></li>

<?php endwhile; ?>
<?php endif; ?>
</ul>
<div class="custom-thumb"></div>