iframe内にあるbxSliderの表示枚数を動的に変更してjsを再度実行したい

Question

###再現したいこと
iframeに同一サーバー内のページを読み込んでおり、その中にbxSliderが導入されています。
このbxSliderを初期ロード時から、動的にiframe内を操作しスライドさせる要素を増減させ、
増減操作後に再度bxSliderを適用させたいと考えています。

イメージとしてはジェネレータのようなものを作成しており、iframe内はあくまでもプレビューとして動作させます。

以下条件になります。
・プレビューはiframeからは変更できません。※インクルードなどで対応は不可です。
・jsを使用したiframe内全体のリロードはできません。
・スライドはbxSlider以外のプラグインでも対応可能ですが、変更できるのは要素の増減をした後のみで初期表示の部分では変更できません。

###わからないこと
そもそもとして一度発火してしまったbxSliderを再度上書いて実行することができるかどうかがわかりません。
DOM操作をしたあと、動的に追加した要素は当然事前に発火済みのイベントに紐づけられないため動作しません。

なので再度jsを実行させるか要素を一度全部削除し新規で追加させ全く別のイベントとして発火させるべきだと思うのですが、再現方法がわかりません。

###コード
以下がDOM操作する前の素のHTMLです。
初期表示ではbxSlider発火するので以下がbxSlider適用後のHTMLに変化します。

<link rel="stylesheet" href="//cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>

<ul class="bxslider">
    <li><img src="http://placehold.jp/200x200.png" alt="要素１"></li>
    <li><img src="http://placehold.jp/200x200.png" alt="要素２"></li>
    <li><img src="http://placehold.jp/200x200.png" alt="要素３"></li>
</ul>

以下コードが、上記のコードに対しbxSliderが実行されたときの一例。
ulの上にタブが追加されたりスタイルやクラスが付与されliのcloneも作成されます。

<link rel="stylesheet" href="//cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>

<div class="bx-viewport" aria-live="polite" style="width: 100%; overflow: hidden; position: relative; height: 560px;">
    <ul class="bxslider" style="width: 3215%; position: relative; transition-duration: 0s; transform: translate3d(-1268px, 0px, 0px);">
        <li style="float: left; list-style: none; position: relative; width: 1268px;" class="bx-clone" aria-hidden="true">
            <img src="http://placehold.jp/200x200.png" alt="要素３">
        </li>
        <li style="float: left; list-style: none; position: relative; width: 1268px;" aria-hidden="false">
            <img src="http://placehold.jp/200x200.png" alt="要素１">
        </li>
        <li style="float: left; list-style: none; position: relative; width: 1268px;" aria-hidden="false">
            <img src="http://placehold.jp/200x200.png" alt="要素２">
        </li>
        <li style="float: left; list-style: none; position: relative; width: 1268px;" aria-hidden="false">
            <img src="http://placehold.jp/200x200.png" alt="要素３">
        </li>
        <li style="float: left; list-style: none; position: relative; width: 1268px;" class="bx-clone" aria-hidden="true">
            <img src="http://placehold.jp/200x200.png" alt="要素１">
        </li>
    </ul>
</div>

しかしこれに対し直接DOM操作で増減させたところで初期の枚数に合わせたスタイルが適用されているので
正しく動作するはずもありません。
###試したこと・解決案
方法がわからず参考サイトを探し色々模索したのですがいずれも正しい解決法がわかりませんでした。

方法①
ひとつは、枚数が変更されるたびに、bxSliderが実行された後の初期のスライドタグを丸っと削除し、
新規で素のHTMLを差し込みliの数を変更させ、再度そこにbxSliderを当てなおすということを考えました。
参考サイト：iframeの親から子、子から親の操作をする（http://cly7796.net/wp/javascript/operation-of-iframe/）

方法②
これも方法①と似ていますが、これはbxSliderが実行された後の初期のスライドタグは削除せずにbxSliderのjsを再実行させ
挙動を上書きしようと考えました。
参考サイト：javascriptの再読込み（https://petitviolet.hatenablog.com/entry/20130418/1366288852）

方法③
これは全く試していませんが、一番現実的な方法だと思いますが、
最初は方法①と同様で、bxSliderが実行された後の初期のスライドタグを丸っと削除し、新規で素のHTMLを差し込みliの数を変更させます。
そのあと追加された要素に対しbxSliderではない別なスライドとして動作する何かを発火させるものです。
序盤に記載した通り、iframe内はあくまでプレビューのため疑似的に表現できればそれでよいので
初期表示はbxSlider、DOM操作後は別のスライダーでも表示が同じであればOKという感じです。

ただこの方法はあくまでbxSliderでは押し通せないとなった場合に使用する最後の手段にしたいので、
もし、DOM操作後にbxSliderを当て治す方法をご存知の方がいればご教示いただければと思います。

Answer 1

具体的なコードが掲載されていないのでざっくり回答しますが、bxSliderには reloadSlider とか destroySlider とかメソッドがあるので、リセット／削除してから動かせばよいのでは。

【jQuery Content Slider | Responsive jQuery Slider | bxSlider】
https://bxslider.com/options/

• Public Methods

reloadSlider

Reload the slider. Useful when adding slides on the fly. Accepts an optional settings object.

destroySlider
Destroy the slider. This reverts all slider elements back to their original state (before calling the slider).