Есть ли такой пример карусели?

Question

[Дмитрий Христоев]

Всем привет! Есть ли пример, из готовых jquery плагинов, реализации такой карусели-галереи? Буду признателен. Либо хотя что-то подобное. На адаптиве количество картинок будет уменьшаться.

Comments

[Антон Литвиненко]

У вас три слайда. А в каждом слайде уже по разному размещены картинки и текст

[Дмитрий Христоев]

Антон Литвиненко, не 3, 4. Я думал да, 4 слайда, в каждом набор картинок, но в адаптиве он будет иметь другое количество фоток в слайде. И так все меньше и меньше. Хз, делать 4 разных карусели? Такое себе решение.

ЗЫ. Либо делаем просто вывод набора картинок, на разрешении делаем обертку, скриптом, в обертке стилями расставляем картинки, инициализируем слайдер, типа Слика или Свайпера.
На другом разрешении, убиваем, опять по кругу, и инициализация.

Но как оно будет выглядеть и работать надо проверять только на практике.

[Ankhena]

Дмитрий Христоев, вертикальными линиями разбиваете нарисованное на слайды. Сейчас их видно 3.
Можно сделать их одинаковой ширины, можно разной.
При адаптиве меняете количество показываемых слайдов.

[Дмитрий Христоев]

Ankhena, вы точки снизу картинок видите?

[Ankhena]

Дмитрий Христоев, вижу. И что?

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

Точки не обязательно означают количество слайдов, а так же могут показывать количество возможных прокруток.
Т.е. если кадров будет 12 и за раз показываться по 4 штуки, то точек будет 3.

[Дмитрий Христоев]

Ankhena, Допустим... количество слайдов на экране 3, внизу экранов 4, в 1 слайде 2 картинки. Так?

[Ankhena]

Дмитрий Христоев,

в 1 слайде 2 картинки. Так?

Даже по видимой части видно, что нет, не так.
В среднем - одна.

[Дмитрий Христоев]

Ankhena, А в первом и в третьем вторая картинка откуда? Я вас вообще не могу понять, то слайда три, а картинка одна

[Ankhena]

Дмитрий Христоев,
В первом кадре 2 картинки и текст.
Возможно, текст нужно вешать по другому, сложно сказать не видя ТЗ и что в других кадрах.

На втором - одна картинка.

На третьем - две картинки.

[Дмитрий Христоев]

При чем тут текст, текс - заголовок блока, который просто опущен вниз.
Если в мобильном будет 1 картинка, что делать?

[Ankhena]

Дмитрий Христоев, что значит одна картинка?
В слайде одна картинка?
Слайды по одному должны показываться?

Рисуйте чтоль, раз словами плохо выходит.

[Дмитрий Христоев]

Ankhena, что значит 1 картинка? 1 картинка - это одна картинка = 1 слайд. Сейчас 5, потому что декстоп, а на мобиле 1. 1 картинка = 1 слайд.

[Ankhena]

Дмитрий Христоев,

При чем тут текст, текс - заголовок блока, который просто опущен вниз.

Я же написала, что без понятия что у вас в ТЗ.

Какой-то дизайнер может хотеть крутить его вместе с каруселью, другой, чтобы он выехал наверх при листании слайдера, третий, чтобы просто исчез или менял фон и все время там прилипшим висел, четвертый еще что-нибудь.
Не нужен в слайде - не складывайте его туда. Делов-то.
Не мы же должны угадывать затеи вашего дизайнера.

[Ankhena]

Дмитрий Христоев,

1 картинка - это одна картинка = 1 слайд. Сейчас 5, потому что декстоп, а на мобиле 1. 1 картинка = 1 слайд.

Само по себе так не выйдет.
И нужно будет перед инициализацией слайдера добавлять обертки, группируя по слайдам.

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

И потом у вас будет проблема с пропорциями.

Универсального решения так не выйдет и я бы не стала так делать.

[Дмитрий Христоев]

Ankhena, как-то так https://codepen.io/haoss/pen/jOMPgxG

Единственно, от 1200 адаптив красиво не работает, только после перезагрузки

[Ankhena]

Дмитрий Христоев, да, отлично! Я про это и говорила, только про свайпер, но это без разницы. Только что swiper более современный и без jq.

Answer 1

[Дмитрий Христоев]

Решение https://codepen.io/haoss/pen/jOMPgxG