Как сделать такой слайдер?

Question

[Илья Пирожок]

Есть сайт stn.complife.in.ua, если вы заходите на него впервые то видите баннер на весь экран со слайдером. Сейчас в слайдер входят только текст и кнопки, а нужно чтобы еще перелистывались картинки, т.е. background. Как это реализовать? Ведь на странице куча других элементов не входящих в слайдер?

Answer 1

[Максим Шек]

В данном случае, проще всего будет повесить обработчик событий методами JavaScript.

Я бы сделал так:

1. В аттрибут data-image я бы указал на ссылку к картинке.
   
2. Повесил бы обработчик событий на кнопку.
   
3. Получаем ссылку, которая хранится в аттрибуте data-image
   
4. При клике менял бы свойство background-image на ту картинку, чью ссылку мы получили при нажатии.
5. По вкусу и цвету можно добавить анимацию, так как смена текста происходит динамически.
   

Мою реализацию можно назвать далеко не идеальной, но, если закидают камнями, хотя бы аргументировано.
Важно! Ознакомьтесь с таким аттрибутом как data-* перед его использованием. Я нашел его достаточно полезным для своих нужд. Надеюсь, я вам помог.

Comments

[Илья Пирожок]

Я конечно же знаю что такое data-* атрибуты) Просто имелось ввиду как объединить этот background со слайдером, чтобы перелистывание выглядело одинаково

[Максим Шек]

Дописать плагин, которым реализуется перелистывание текста и блока

[Максим Шек]

Илья Пирожок: Либо можно сделать через CSS, но это, по мне так, плохо. Лучше на js

Answer 2

[aphows]

Логично использовать несколько контейнеров для слайдера и при триггере slideChange менять классы в обоих контейнерах (в зависимости от вашей методики создания слайдера: лента или классы). Если вы хотите использовать готовое решение, можно подключить два слайдера slick и в одном из них указать опцию asNavFor (kenwheeler.github.io/slick раздел slider syncing).

Comments

[Илья Пирожок]

т.е. использовать 2 слайдера и при клике на кнопку пролистывать оба?

[aphows]

Илья Пирожок: да, если выбирать из готовых решений, slick лучше всего подходит для этой задачи