Слайдер с миниатюрами вместо стрелок

[Crystal-3]

Здравствуйте.
Ребята, нужна ваша помощь. Согласно дизайна в слайдере вместо стрелок "prev" и "next" должны отображаться миниатюры предыдущего и следующего слайда. Подскажите, пожалуйста, в какую сторону смотреть или хотя бы как правильно загуглить. У меня идей нет вообще.

Edited October 21, 2017 by Crystal-3

[mrnobody]

Вот мой вариант: 

Использовал slick.

[DivMan]

ты сначала сделай с обычными стрелками 

[Tilonorrinco]

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

Либо, если нужно что-то простое -- можно написать самостоятельно что-то вроде этого (нужно нажать run with js, чтобы включились скрипты): 

http://jsbin.com/fofaxom/edit?js,output

 

Edited October 21, 2017 by Tilonorrinco

[Crystal-3]

Здравствуйте, Tilonorrinco.  

Спасибо, что откликнулись, но у меня всё-таки не совсем стандартная штука.

В моём случае изображения в слайдах будут фоном и их каким-то образом нужно передавать на стрелочки http://prntscr.com/h0ffez 

[Tilonorrinco]

Crystal-3, принцип существенно не меняется.

http://jsbin.com/kapopef/edit?output

Т.к. фоновое изображение не является частью контента, алгоритм можно упростить, и убрать список изображений из разметки. Ссылки на изображения и превьюшки передаются в отдельных массивах. Изображения и их уменьшенные копии (в примере уменьшенных копий нет из-за специфики сервиса dummy-изображений) загружаются заранее и после загрузки выполняется скрипт. 

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

 

Edited October 22, 2017 by Tilonorrinco

[Crystal-3]

Круто, отличные варианты!)  Ребята, огромное-огромное спасибо, вы мне очень помогли!

mrnobody, обычно в проектах использую slick slider, но с данным дизайном совсем растерялась. Благодарю)