Carousel or Cycle displaying 6 elements in grid format

Question

Carousel or Cycle displaying 6 elements in grid format

Navigation

#1 by (1 votes)

0

In the HTML code below, I have a listing of images within a container . I'd like to limit the display of these images to a table of 2 rows and 3 columns and page to look better.

<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 slick and the jQuery Cycle2 , but they display the images linearly, whether horizontal or vertical.

Can anyone give me a hand?

EDIT:

An outline of what it would be: JSFIDDLE

javascript jquery css

asked by anonymous 13.08.2014 / 17:05

1 answer

RAD Studio XE6 does not connect to any database! Automatically call bower_components in the header

score 1 · Answer 1

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

You should divide the content and make 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 display, eg

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>

3x2 sets: (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 made the break with <br> to be more visible, but you can organize it in css ...