【jQuery】【TwentyTwenty】２つのビフォーアフターを横並びにしたい

Question

TwentyTwentyというJQueryプラグインを使用して、ビフォーアフターを設置しようとしております。
レスポンシブ対応が必要なので、Bootstrapを使用しております。
そこでビフォーアフターの事例を２つ横並びで設置したいと思い、

<script type="text/javascript">
	$(window).load(function(){
		$('.ba-width').twentytwenty({default_offset_pct: 0.5});
	});
</script>

<div class="container">
    <div class="row">
        <div class="col-sm-6 ba-width">
	    <img src="../img/after.jpg" class="before"/>
	    <img src="../img/after.jpg" class="after"/>
        </div>
        <div class="col-sm-6 ba-width">
            <img src="../img/after.jpg" class="before"/>
	    <img src="../img/after.jpg" class="after"/>
        </div>
    </div>
</div>

のようにしましたが、これだと動作しません。
最初はスクリプトの読み間違い？かと思いましたが下記のようにcol-sm-12にすると正常に動きました。

<div class="container">
    <div class="row">
        <div class="col-sm-12 ba-width">
	    <img src="../img/after.jpg" class="before"/>
	    <img src="../img/after.jpg" class="after"/>
        </div>
    </div>
</div>

2カラムにすることで動かなくなるようなのですが、これを回避する方法は何かないでしょうか？
どなたかご教示頂ければと思いますので宜しくお願いします。

Comments

[kei344]

エラーは出ていませんか？デベロッパーツールで確認してみてください。http://eng-entrance.com/javascript-display-error

Answer 1

kei344さん、ありがとうございました。エラーは特に出ていませんでした。
無理やりですが、動的に生成される「twentytwenty-wrapper」「twentytwenty-horizontal」クラスをもつ要素に「col-sm-6」を付与し、なんとか動くようになりました。