K
K
Kadzi2018-05-03 18:54:51
User interface
Kadzi, 2018-05-03 18:54:51

What is the best way to implement cards?

Hello, I'm not interested as a layout designer,
I need to implement 1 block with cards. There are 5-8 products that need to be made in the form of a slider:
5aeb2afc60fea034515677.png.
With a smartphone and tablet, everything is clear. But what if there are, for example, 10, 18 or 30? How, then, should they look on a PC?
Are there any solutions besides the flow, like me in Yandex Pictures?
5aeb2c68836f5993144125.png
What could such a long slider on PC transform into? Would it conditionally be something like this? Example:
5aeb2e9517111239085154.png
Would it make sense, for this block, given that there are more than 5-9 cards, to do this? Example, from the Kulturvolk site, the slider is tied to the left:
5aeb301c37bcc383217872.png
I will be glad to absorb any useful information on cards, the slider and typical problems.

Answer the question

In order to leave comments, you need to log in

4 answer(s)
X
xmoonlight, 2018-05-03
@Kadzi

I would leave them in one line (I would also leave them as a slider) and maybe make them horizontal if the width of the browser window exceeds 1200px.
That is, the light part with the yellow button would be placed on the right.
This would save us from the "palisade" and from the "blur" of attention from the simultaneous display of a large number of cards.
At the same time, this would immediately reduce the height of the slider by 2 times, which would allow you to see more of what is lower on the page without scrolling.

M
Mikhail Proskurin, 2018-05-03
@mixail_fet

It is incorrect to load 30 cards at once, which will be in the slider, and the volume is too large for scrolling, no one will scroll to the 30th card in the slider, where only 5 products are initially visible.
There are several options:
1. The "show more" button - when pressed, 6 more cards will appear with a smooth animation. Then on the PC it will not be necessary to implement the slider at all.
2. The "show all" button, which leads to a complete list of all cards.

V
Vitaly Mironov, 2018-05-03
@nor1m

display: flex

T
tema_sun, 2018-05-03
@tema_sun

I hate horizontal scrolling on desktop. It’s not at all difficult for me to turn the wheel down, but to the side - what for.
I am for the option without a slider on the desktop.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question