Как реализовать подобную галлерею?

Question

[deniskins23]

Доброго времени суток.
Кто может подсказать как реализовать подобное?
Пытаюсь понять какой слайдер сюда подключить. Проблема в том, что элементы от основного справа и слева не одного количества) и в том, что нужно будет реализовывать переключение левой описательной части в зависимости от того, какой слайд активен..
За советы буду признателен.

Comments

[VegasChickiChicki]

А может написать его самому? В чем сложность? Или вы ищите уже готовый вариант?

[deniskins23]

VegasChickiChicki, Можно попробовать написать и самому, но может знаний не хватить, да и с адаптивном сложновато наверное будет..Готовое решение было бы оптимальнее в данном случае..Если оно есть конечно..Можете что-то посоветовать?

[VegasChickiChicki]

deniskins23, Мне обычно самому интереснее реализовывать все ,по этому я не часто пользуюсь такими библиотеками ,так мне посоветовать нечего ,увы(

[deniskins23]

VegasChickiChicki, Ок. Спасибо в любом случае,. что отреагировали. Удачного вечера.

Answer 1

[FalseCode]

Да тут и слик и свайпер подойдут

Comments

[deniskins23]

А как скажем слик стилизовать и настроить так, чтобы слева был один слайд,а справа 2(ну и плюс активный в центре)? И еще вопрос, а как потом дотянуться до слайда активного и на основании того, какой он переключить описание слева?

[FalseCode]

deniskins23,
1) слева и справа по 1 показываем свойством center padding, потос выводим на показ 2 слайда, и обыгрываем классы slick-current и slick-active через css.
2) до инициализации слайдера Вам нужно будет посчитать слайды в любом случае, вот на этом же моменте (до инициализации) расставим data атрибуты с номерами слайдеров. Для того чтобы при клике на слайд с помощью метода slickGoTo переключить слайдер.
Можно реализовать как одним слайдером так и 2 (в одном картинки в другом текст)

[deniskins23]

FalseCode, Примерно то понял. И мысль примерно понял, вот только первый пункт ответа - нужно то по дизайну чтобы слева от активного слайда был один слайд, а справа два. Как это в слике реализовать?Я не нашел там..

[FalseCode]

deniskins23,
slidesToShow: 2,
centerMode: true,
centerPadding: '60px', (пиксели подбери или в %)

[deniskins23]

FalseCode, И тут я снова наверное не понимаю..в этом случае будут показаны два слайда, а по факту нужно 4!Один активный, который увеличен на изображении в размере, один слева от него и два справа от него.Или я все, приехал..-)

[FalseCode]

deniskins23,
slidesToShow: 2, // показали 2
centerMode: true,
centerPadding: '60px', // тут ставим лучше в % такое число чтобы еще 2 было видно

[FalseCode]

deniskins23,
Так же можно
slidesToShow: 4,
centerMode: true,
centerPadding: '0',
Потом просто смотрим классы и работаем с ними. По идее должно сработать

[deniskins23]

FalseCode, Ок. Это попробую. А как привязать потом текст-описание слева на каждый слайд?Вопрос скорее в том, как добраться до активного слайда и получить как-то его атрибут, чтобы по нему вывести скажем по принципу табов описание слайда..

[FalseCode]

deniskins23, если нету идей как все в один слайдер поместить сделай 2 и свяжи с помощью asNavFor

[MegaPuxapb]

deniskins23, Активному слайду в слике, вроде как .slick-current присваивается. можно в прямо в слайд вписать описание, сделать дисплей нон, или что то подобное, и при slick-current клонировать в левый блок.

[MegaPuxapb]

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

[MegaPuxapb]

FalseCode, Попробуйте активному слайду в слике, вроде как .slick-current присваивается. можно в прямо в слайд вписать описание, сделать дисплей нон, или что то подобное, и при slick-current клонировать в левый блок.

[deniskins23]

FalseCode, Попробовал. ПОлучилось вывести 4, но проблема в том, что через centerPadding когда делаешь, то он активный слайд сдвигает вправо, а не влево и влево его никак не получается толкнуть..Есть мысль по этому поводу?А так да, впрнципе получается постепенно что нужно

[deniskins23]

MegaPuxapb, Согласен, вот только гемор затянулся..Есть мысли как сделать все же?

Answer 2

[profesor08]

Впиньдюрь любой какой знаешь, при смене слайда меняй контент слева и циферки. А слайду назначь дополнительный класс, чтоб увеличить его и задать фон. slick справится.

Comments

[deniskins23]

И снова вопрос в том, как стилизовать так, чтобы слева от активного слайда был один слайд, а справа два..Я слике подобного не нашел.

[profesor08]

deniskins23, слайдер только справа. слева у тебя набор скрытых блоков, один из которых ты показываешь.

[deniskins23]

profesor08, Это как?не до конца понял мысль..

[profesor08]

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

[deniskins23]

profesor08, Мы наверное не об одном говорим. Вот есть активный слайд, который больше чем все остальные, справа от него два изображения(слайда), а слева одно. Как это то в слике задать?Он ведь выдает при инициализации определенное количество блоков и активный слайд ставит в центре!Разве я не прав?

[profesor08]

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

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

[deniskins23]

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