Как лучше реализовать карточки?

Question

[Kadzi]

Привет, интересуюсь не как верстальщик,

нужно реализовать 1 блок с карточками. Есть 5-8 товаров, которые нужно сделать в виде слайдера:
.

Со смартфоном и планшетом все понятно. Но что, если их станет например 10, 18 или 30? Как в таком случае они должны выглядеть на ПК?

Есть ли решения, кроме потока, как я в Яндекс картинках?



Во что мог бы преобразоваться такой длинный слайдер на ПК? Это условно было бы что-то типа такого? Пример:



Имело бы смысл, для этого блока, с учетом что карточек стало больше 5-9, делать так? Пример, с сайта культурволк, слайдер привязан к левому краю:



Буду рад впитать любую полезную инфо по карточкам, слайдеру и типичным проблемам.

Answer 1

[xmoonlight]

Я бы оставил в одну линейку (оставил бы также слайдером) и, возможно, сделал бы их горизонтальными, если ширина окна браузера превысит 1200px.
Т.е., светлую часть с жёлтой кнопкой - разместил бы справа.
Это избавило бы от "частокола" и от "размытия" внимания от единовременного отображения большого количества карточек.
Заодно, это сразу бы уменьшило высоту слайдера в 2 раза, что позволило бы больше увидеть того, что ниже на странице без скролла.

Comments

[Kadzi]

А допустимо было бы сделать так: смартфон и планшет ( а возможно и только смартфон) это слайдер, а потом он преобразуется в:



и возможно в эти карточки добавляется дополнительная инфо, т.к простор позволяет.

п.с я правильно понимаю, что клиент сможет просто загружать через админку нужную фото и текст, которая просто будет менять свой масштаб при брекпоинтах соответственно? И вот этот нюанс с добавлением информации по мере увеличения ширины, насколько это громоздко/сложно в реализации?

[xmoonlight]

Kadzi, допустимо всё. сложности - никакой. всё зависит от верстальщика и его рук! Банально - это делается через float:left, но лучше - использовать адаптивную сетку.

[xmoonlight]

Kadzi, Ещё есть приём замещения: когда выводятся над фото только основные данные, а по клику на иконку "инфо"/"все данные" - выводится на этом же месте (вместо изображения) уже подробная информация о товаре.
Смена изображения и списка данных - может быть как мгновенная: одно погасили, другое показали. Так и в виде слайдера, который сдвигается влево и вправо (или вверх и вниз, если вертикальный слайдинг). Тут - эффекты могут быть любые, которые позволят чувствовать пространство: всю карточку целиком!

[Kadzi]

xmoonlight, как вы считаете, что должно происходить при наведении курсора на карточку на пк? Лучше делать ссылку только на кнопку или на всю площадь карты? И такой же вопрос для смартфона. Или при взаимодействии с картой в любой случае должен быть ховер, а переход только по нажатии кнопки?

п.с как быть с ползунком? когда он реально нужен? я изучал сайты со слайдерами, они то есть, то их нет.

[xmoonlight]

Kadzi,
1. При ховере на ПК - отображать развёрнутую и увеличенную карточку. Что-то вроде эффекта линзы, но только для одной карточки и приподнимать её с помощью эффекта тени.
2. Про ссылку: для отображения доп.инфы - лучше на всю площадь карточки за вычетом зоны с кнопкой и небольшой рамки вокруг неё.
3. Для перехода на страницу товара - только по этой кнопке.

На мобиле, аналог ховера на ПК (п.1), можно сделать триггер: раз нажал увеличило карточку (по аналогии с full-screen), второй раз - вернуло на место.
П.2 - убираем, соответственно.
П3. - также оставить для мобилы.

Про скролл внизу - только для ПК и с отображением миниатюр с названиями товаров пока тащишь ползунок, над ним. Иначе - он не нужен больше нигде.

[Kadzi]

xmoonlight, большое спасибо за ответы!

а есть ли сайты, с подборками подобных эффектов? Я посещал сайты где например есть разные ховеры, скажем кнопок, выбираешь примерно подходящий и отправляешь верстальщику с ссылкой, но их обычно очень мало, возможно есть посвященные этому сайты (исключительно интерфейсным штукам).

Похожее на codepen. Или codepena при хорошем серфе за глаза хватает? Я правильно понимаю, что это открытый ресурс? Условно можно найти хорошее решение и переделать под себя и это не будет воровство? Корректно ли отправлять верстальщику ссылку на какой-нибудь эффект из кодпена, достаточно ли там будет информации для него?

[xmoonlight]

Kadzi, это ресурс-песочница. Там надо читать правила и типы лицензирования.
Т.к. сама лицензия - может быть прописана прям в коде!
Вот подборка из моего архива:
www.cssmatic.com
jsdo.it
https://www.cssscript.com/
https://html5book.ru/

Answer 2

[Михаил Проскурин]

Некорректно сразу загружать 30 карточек, которые будут в слайдере, да и слишком большой объем для скролла, никто не будет прокручивать до 30-ой карточки в слайдере, где только 5 товаров видно изначально.

Вариантов несколько:

1. Кнопка "показать еще" - при нажатие, плавной анимацией будет появляться еще 6 карточек. Тогда на ПК вообще не нужно будет реализовывать слайдер.

2. Кнопка "показать все", которая ведет на полный список всех карточек.

Answer 3

[Апатий Черный]

display: flex

Comments

[Kadzi]

я не уточнил, я не верстальщик. вопрос подразумевался: собственно должен ли этот слайдер оставаться или должен преобразовываться в поток?)

[Апатий Черный]

Kadzi, можно просто за границу выводить его и все, просто overflow: hidden сделать его родителю

Answer 4

[tema_sun]

Ненавижу горизонтальный скролл на десктопе. Мне совершенно не сложно покрутить колесиком вниз, но в бок - нафиг надо.
Я за вариант без слайдера на десктопе.