TwentyTwentyというJQueryプラグインを使用して、ビフォーアフターを設置しようとしております。
レスポンシブ対応が必要なので、Bootstrapを使用しております。
そこでビフォーアフターの事例を2つ横並びで設置したいと思い、
jQuery
1<script type="text/javascript"> 2 $(window).load(function(){ 3 $('.ba-width').twentytwenty({default_offset_pct: 0.5}); 4 }); 5</script>
HTML
1<div class="container"> 2 <div class="row"> 3 <div class="col-sm-6 ba-width"> 4 <img src="../img/after.jpg" class="before"/> 5 <img src="../img/after.jpg" class="after"/> 6 </div> 7 <div class="col-sm-6 ba-width"> 8 <img src="../img/after.jpg" class="before"/> 9 <img src="../img/after.jpg" class="after"/> 10 </div> 11 </div> 12</div>
のようにしましたが、これだと動作しません。
最初はスクリプトの読み間違い?かと思いましたが下記のようにcol-sm-12にすると正常に動きました。
HTML
1<div class="container"> 2 <div class="row"> 3 <div class="col-sm-12 ba-width"> 4 <img src="../img/after.jpg" class="before"/> 5 <img src="../img/after.jpg" class="after"/> 6 </div> 7 </div> 8</div>
2カラムにすることで動かなくなるようなのですが、これを回避する方法は何かないでしょうか?
どなたかご教示頂ければと思いますので宜しくお願いします。
回答1件
あなたの回答
tips
プレビュー