带有jquery和多个页面,行和列的响应式转盘

时间:2017-06-10 13:47:29

标签: javascript jquery html responsive-design carousel

主要是寻找执行以下请求的jQuery库。

这是交易:我有多个帖子,让我们说十三个让它变得更容易。

取决于调整大小的窗口或初始显示/视口,我希望页面和我的帖子显示在不同的视图中

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>

欢迎任何形式的帮助!

1 个答案:

答案 0 :(得分:0)

使用slick.js,最适合每个屏幕,移动设备和真正信任的