Слайдер перезагрузки bxslider не работает в другом файле

Question

Я просто хочу добавить слайд в bxslider динамически, я сделал это успешно, когда я пишу код в одном файле js, но моя проблема в том, что я не могу написать код перезагрузки bxslider в одном файле. Посмотрите на мой код, тогда вы поймете

Мой php файл

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="bxslider.min.js"></script>
<script src="custom.js"></script>
<!-- bxSlider CSS file -->
<link href="bxslider.css" rel="stylesheet" />


<ul id="slider" class="bxslider">
  <li><img src="images/pic1.jpeg" /></li>
  <li><img src="images/pic2.jpeg" /></li>
</ul> 

<input type="button" id="add" value="Add">

<script>
$(document).ready(function(){
  slider = $('.bxslider').bxSlider();

    $('#add').click(function(){
        var add_new = '<li><img src="images/pic3.jpeg" /></li>';
        console.log($('#slider'));
        console.log(slider);
        $('#slider').append(add_new);
        slider.reloadSlider();
    });
});
</script>

мой файл JS

var slider;
$(document).ready(function(){
  slider = $('.bxslider').bxSlider();

});

Когда я пишу этот php jquery-код в js-файл, то он работает отлично, но в настоящее время он не работает. Можете ли вы сказать мне, в чем проблема с ним, в то время как 'добавляет, когда я нажимаю кнопку добавления, а также если я console.log(слайдер) это показывает мне их, но не перезагружает его.

Answer 1

Я сам нашел решение:) Я просто объявляю переменную с помощью window.slider, после чего она работает