I'm working on a website and I implemented bxSlider in it. I have a page in which there are many images (their class name is `.item`). When you click one of the images, an overlay window would show up and display content (with a few paragraphs) and after that there's a sldieshow.

Problem is that I'm calling bxSlider right after document.ready, and since my overlay window is hidden (`display:none`), bxSlider won't load up properly.

And so I decided to put `$('.bxSlider').bxSlider();` inside `$('.item').click();`
and it works well.

But when Im closing the overlay window, and then showing it up again by clicking on `.item`, it will try to call the bxSlider function again, which will cause problems.

I tried to call `$('.bxSlider').destroySlide();` under `.close` (the div that closes the overlay window) but it doesn't work.

**JQuery:**

```
$(function(){
     //show bxslider
    $('a.show').click(function(){
        $('ul.bxslider').fadeIn();
         var slider = $('.bxslider').bxSlider();
        return false;
    });

    //hide bxslider
    $('a.hide').click(function(){
        $('ul.bxslider').fadeOut();
        return false;
    });
});

```

**Html:**

```
<a href class="show">Show Slider</a>
<a href class="hide">Hide Slider</a>
<br /><br />
<ul class="bxslider">
    <li><img src="http://placehold.it/200x200" /></li>
    <li><img src="http://placehold.it/200x200" /></li>
    <li><img src="http://placehold.it/200x200" /></li>
    <li><img src="http://placehold.it/200x200" /></li>
</ul>

```

JSFiddle [link](http://jsfiddle.net/GnBTm/3/) 

Could anyone help me? [Here](http://bxslider.com/options)'s the plugin options: