ほとんどの場合、次のリクエストを行うjQueryライブラリを探しています。jqueryと複数のページ、行と列を持つ反応的なカルーセル
私は複数の投稿を持っています。それをもっと簡単にするために13としましょう。
リサイズなっ窓や初期表示/ビューポートのいずれかに応じて、私は別のビューに
Here's example of what I'm talking about
を表示するページや、私のポストを持ちたい私のコードは本当に簡単です:
section { font-size: 0; text-align: center; }
section article { display: block; width: 100%; }
section article figure { }
section article figure img { display: block; width: 100%; height: auto; }
section article .infos { }
section article .infos p { font-size: 12px; }
@media (min-width: 768px) {
section article { display: inline-block; width: 50%; }
}
@media (min-width: 990px) {
section article { width: 33.333%; }
}
@media (min-width: 1200px) {
}
<section>
<article><figure><img src="https://dummyimage.com/320x240/000/fff/" alt="lorem ipsum dolor" title="lorem ipsum dolor"></figure><div class="infos"><p>lorem ipsum dolor sit amet.</p></div></article>
<article><figure><img src="https://dummyimage.com/320x240/000/fff/" alt="lorem ipsum dolor" title="lorem ipsum dolor"></figure><div class="infos"><p>lorem ipsum dolor sit amet.</p></div></article>
<article><figure><img src="https://dummyimage.com/320x240/000/fff/" alt="lorem ipsum dolor" title="lorem ipsum dolor"></figure><div class="infos"><p>lorem ipsum dolor sit amet.</p></div></article>
<article><figure><img src="https://dummyimage.com/320x240/000/fff/" alt="lorem ipsum dolor" title="lorem ipsum dolor"></figure><div class="infos"><p>lorem ipsum dolor sit amet.</p></div></article>
<article><figure><img src="https://dummyimage.com/320x240/000/fff/" alt="lorem ipsum dolor" title="lorem ipsum dolor"></figure><div class="infos"><p>lorem ipsum dolor sit amet.</p></div></article>
<article><figure><img src="https://dummyimage.com/320x240/000/fff/" alt="lorem ipsum dolor" title="lorem ipsum dolor"></figure><div class="infos"><p>lorem ipsum dolor sit amet.</p></div></article>
<article><figure><img src="https://dummyimage.com/320x240/000/fff/" alt="lorem ipsum dolor" title="lorem ipsum dolor"></figure><div class="infos"><p>lorem ipsum dolor sit amet.</p></div></article>
<article><figure><img src="https://dummyimage.com/320x240/000/fff/" alt="lorem ipsum dolor" title="lorem ipsum dolor"></figure><div class="infos"><p>lorem ipsum dolor sit amet.</p></div></article>
<article><figure><img src="https://dummyimage.com/320x240/000/fff/" alt="lorem ipsum dolor" title="lorem ipsum dolor"></figure><div class="infos"><p>lorem ipsum dolor sit amet.</p></div></article>
<article><figure><img src="https://dummyimage.com/320x240/000/fff/" alt="lorem ipsum dolor" title="lorem ipsum dolor"></figure><div class="infos"><p>lorem ipsum dolor sit amet.</p></div></article>
<article><figure><img src="https://dummyimage.com/320x240/000/fff/" alt="lorem ipsum dolor" title="lorem ipsum dolor"></figure><div class="infos"><p>lorem ipsum dolor sit amet.</p></div></article>
<article><figure><img src="https://dummyimage.com/320x240/000/fff/" alt="lorem ipsum dolor" title="lorem ipsum dolor"></figure><div class="infos"><p>lorem ipsum dolor sit amet.</p></div></article>
<article><figure><img src="https://dummyimage.com/320x240/000/fff/" alt="lorem ipsum dolor" title="lorem ipsum dolor"></figure><div class="infos"><p>lorem ipsum dolor sit amet.</p></div></article>
</section>
ヘルプの任意の種類は歓迎されます!
slickfyを試しましたか? – ISHIDA