Задать вопрос
@Ddmitrich
javascript

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

Друзья, всем привет!
Кто подскажет как сделать такой слайдер (желательно на slick, т.к. он уже используется в проекте).
5aa7de49018b3848013987.png
Справа - слайдер, а слева превью. Превью может быть много, но показаны только первые 6 штук, остальные тоже являются слайдером, которые скролятся вертикально.
Со slick slider работал достаточно много, но уже сколько ломаю голову, все никак не могу сделать. Знаю, что есть такие настройки как asNavFor, чтобы сделать слайдеры зависимыми. Также есть настройка vertical, чтобы сделать превью вертикально скролящимися, а также rows, чтобы сделать в два ряда, но тогда в фокус попадает сразу 2 превью и справа картинка не соответствует превью, находящимся в фокусе.
В общем, что уже только не перепробовал, все никак(( Если бы превью были в один ряд, то другое дело, но клиент хочет именно в два.
Помогите, пожалуйста! Либо может есть какие-то уже готовые подобные плагины, готов пойти уже даже на такие жертвы.
Заранее огромное спасибо!
  • Вопрос задан
  • 4129 просмотров
4 комментария
Подписаться 6 Средний 4 комментария
Пригласить эксперта
Ответы на вопрос 4
alex-1917
@alex-1917
Если ответ помог, отметь решением
Твою дивизию!!! В примерах у разработчика даже пример есть!!!!
jQuery(document).ready(function($){
	$('.slider-for').slick({
		slidesToShow: 1,
		slidesToScroll: 1,
		arrows: false,
		fade: true,
		asNavFor: '.slider-nav'
	});
	$('.slider-nav').slick({
		slidesToShow: 2,
		slidesToScroll: 1,
		asNavFor: '.slider-for',
		dots: true,
		centerMode: true,
		focusOnSelect: true
	});
});

<div class="slider-for">
	<img src="kortingo_01_big.jpg" alt="">
	<img src="kortingo_02_big.jpg" alt="">
	<img src="kortingo_03_big.jpg" alt="">
	<img src="kortingo_04_big.jpg" alt="">
</div>
<div class="slider-nav">
	<img src="kortingo_01_small.jpg" alt="">
	<img src="kortingo_02_small.jpg" alt="">
	<img src="kortingo_03_small.jpg" alt="">
	<img src="kortingo_04_small.jpg" alt="">
</div>

Стили сам нарисуешь!
Ответ написан
2 комментария
2 комментария
thehighhomie
@thehighhomie
ахаха)) ты делаешь сайт КИПАРХу? просто поставь любой плагин для слайдера, к примеру owl-carousel и переопредели стили в верстке, вот и все. Ну или руками сделай, че там 15 минут)
Ответ написан
7 комментариев
7 комментариев
Dima_So
@Dima_So
Experientia est optima magistra
https://codepen.io/dolce/pen/QarQde
Ответ написан
2 комментария
2 комментария
@V_Holmow
У css-мастера вроде, есть старый видос как делать подобный слайдер, там он делает на примере карточки товара. Поищи на ютубе. А вообще это очень легко.
Ответ написан
2 комментария
2 комментария
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Fullstack
OnClass
от 200 000 до 600 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Менеджер по продажам в онлайн-школу
17 апр. 2024, в 00:48
35000 руб./за проект
Сделать картинки для слов
17 апр. 2024, в 00:13
800 руб./за проект
Разработка backend python+django
17 апр. 2024, в 00:06
240000 руб./за проект
Ещё заказы