bxslider - how to get thumbnails to link to main images

Question

I am using bxslider to call images for individual records

The slider is working fine and I have it set to auto page through the images related to the specific record, but I am having a problem linking the thumbnails to the slider.

At the present time if I click on a thumbnail below the slider it is loading the image in a lightbox (if that is the correct terminology) instead of moving the slider along to the relevant image.

Below is my code that I am using and any suggestions would be appreciated thank you - Mel

    <div> <script type="text/javascript">
    $(document).ready(function(){
    $('.bxslider').bxSlider({       
    mode: 'fade',
    captions: 'false',
    auto: 'true',
    autoControls: 'true',
    });
    });
    </script>

    <ul class="bxslider list-unstyled"><?php foreach($images as $key=>$image) { ?>
    <li class="img-responsive list-unstyled"><img src="<?php echo $image ['image']; ?>" /></li><?php } ?>
   </ul></div>

   <div id="bx-pager">

   <div class="row">
            <?php foreach($images as $key=>$image) { ?>
            <div class="col-md-3 col-sm-4 col-xs-6 bx-pager">
                <a class="image_group thumbnail" rel="image_group" href="<?php echo $image['image']; ?>" title="<?php echo $this->escape($image['title']); ?><?php if($image['description']) { ?> - <?php } ?><?php echo $this->escape($image['description']); ?>">
                    <img src="<?php echo $image['thumb']; ?>" alt="<?php echo $this->escape($image['title']); ?><?php if($image['description']) { ?> - <?php } ?><?php echo $this->escape($image['description']); ?>">
                </a>
            </div>
            <?php } ?>
        </div>

    </div>