10 個のサムネイル画像があり、高さは固定されているが幅は伸縮自在のコンテナがあるとします。その div でオーバーフローしているすべてのサムネイルを新しく作成された div ラッパーに移動する方法はありますか?
オーバーフローしているすべてのサムネイルを別のラッパーに入れたいのは、これらのラッパーをカルーセルに実装して、カルーセルの次のボタンをクリックすることでオーバーフローしているすべてのサムネイルを見つけられるようにしたいからです。
<div class="wrapper">
<a href="#"><img src="" class="thumb" alt="thumbnail" /></a>
<a href="#"><img src="" class="thumb" alt="thumbnail" /></a>
<a href="#"><img src="" class="thumb" alt="thumbnail" /></a>
<a href="#"><img src="" class="thumb" alt="thumbnail" /></a>
<a href="#"><img src="" class="thumb" alt="thumbnail" /></a>
<a href="#"><img src="" class="thumb" alt="thumbnail" /></a>
<a href="#"><img src="" class="thumb" alt="thumbnail" /></a>
<a href="#"><img src="" class="thumb" alt="thumbnail" /></a>
<a href="#"><img src="" class="thumb" alt="thumbnail" /></a>
<a href="#"><img src="" class="thumb" alt="thumbnail" /></a>
</div>
問題は、これはレスポンシブ デザインであるため、ウィンドウのサイズが変更されたときにも機能する必要があるためです。したがって、ユーザーがウィンドウの幅を縮小すると、最初のラッパー コンテナーに表示されるサムネイルが少なくなり、コンテナーの幅が大きくなると、最初のラッパーに表示されるサムネイルが増えます。
このためのプラグインがどこかにあるのではないかと思っていましたが、何も見つかりませんでした。
ご協力ありがとうございました。
編集
ページの読み込み時に動作させることができましたが、ウィンドウのサイズを変更すると問題が発生します。JRespond を使用して、特定のウィンドウ幅で wrap_thumbs 関数をトリガーしています。関数が何度もトリガーされ、ブラウザが基本的にクラッシュする可能性があるようです。
ダウンロードリンク: project_ZIP