Responsive Karussell mit jquery und mehrere Seiten, Zeilen und Spalten

Question

Meistens auf der Suche nach einer jQuery-Bibliothek die folgende Anfrage zu tun.

Hier ist der Deal: Ich habe mehrere Beiträge, sagen wir dreizehn, um es einfacher zu machen.

Je nach, entweder das Fenster verkleinert zu werden oder die anfängliche Anzeige/Ansichtsfenster, möchte ich Seiten und meine Beiträge in anderen Ansicht Anzeigen haben

Here's example of what I'm talking about

Mein Code ist wirklich einfach:

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>

Jede Art von Hilfe ist willkommen!

Answer 1

Verwenden Sie slick.js, am besten für jeden Bildschirm, mobile und wirklich vertrauenswürdig!