Carousel or Cycle displaying 6 elements in grid format

Asked

Viewed 436 times

0

In the HTML code that follows below, I have a listing of images within a container. I would like to limit the display of these images in a table of 2 lines and 3 columns and paginate to look better visually.

<div class="container">
    <a href="#"><img src="img.png"></a>
    <a href="#"><img src="img.png"></a>
    <a href="#"><img src="img.png"></a>
    <a href="#"><img src="img.png"></a>
    <a href="#"><img src="img.png"></a>
    <a href="#"><img src="img.png"></a>
    <a href="#"><img src="img.png"></a>
    <a href="#"><img src="img.png"></a>
    <a href="#"><img src="img.png"></a>
    <a href="#"><img src="img.png"></a>
    <a href="#"><img src="img.png"></a>
    <a href="#"><img src="img.png"></a>
</div>

<div class="pagination-douts">
    <span class="page"></span>
    <span class="page actie"></span>
</div>

I’ve tried using the Slick and the jQuery Cycle2, but they display images linearly, either horizontally or vertically.

Can someone give me a hand?

EDIT:

A sketch of what it would be: JSFIDDLE

javascript jquery css paging

1 answer

1

You are trying to limit the width of the parent container and make the content break inside it automatically, and so it will not work with the slider.

You should split the content and have the slider treat each portion (two units one above the other, or a set of 3x2 for ex) as 1 item or page that it should show, for example:

2 units one above the other: (show 3 items per page)

<div class="container">
    <div>
       <a href="#"><img src="img.png"></a><br>
       <a href="#"><img src="img.png"></a>
    </div>
    <div>
       <a href="#"><img src="img.png"></a><br>
       <a href="#"><img src="img.png"></a>
    </div>
    <div>
       <a href="#"><img src="img.png"></a><br>
       <a href="#"><img src="img.png"></a>
    </div>
    <div>
       <a href="#"><img src="img.png"></a><br>
       <a href="#"><img src="img.png"></a>
    </div>
    <div>
       <a href="#"><img src="img.png"></a><br>
       <a href="#"><img src="img.png"></a>
    </div>
    <div>
       <a href="#"><img src="img.png"></a><br>
       <a href="#"><img src="img.png"></a>
    </div>
</div>

Sets of 3x2: (show 1 item per page)

<div class="container">
    <div>
       <a href="#"><img src="img.png"></a>
       <a href="#"><img src="img.png"></a>
       <a href="#"><img src="img.png"></a><br>
       <a href="#"><img src="img.png"></a>
       <a href="#"><img src="img.png"></a>
       <a href="#"><img src="img.png"></a>
    </div>
    <div>
       <a href="#"><img src="img.png"></a>
       <a href="#"><img src="img.png"></a>
       <a href="#"><img src="img.png"></a><br>
       <a href="#"><img src="img.png"></a>
       <a href="#"><img src="img.png"></a>
       <a href="#"><img src="img.png"></a>
    </div>
</div>

I broke it with <br> to be more visible, but you can organize in css...

Browser other questions tagged javascript jquery css paging

You are not signed in. Login or sign up in order to post.