Crystal-3

Карусель с навигацией в 2 ряда

Recommended Posts

Всем привет!
Есть задачка - сделать карусель, в котором навигация в 2 ряда http://prntscr.com/pb6dlu
Обычно пользуюсь плагином slick. Есть у него в настройках slidesPerRow и rows, с помощью которых можно выстроить визуально в 2 ряда, но увы, навигация работает некорректно.
Буду благодарна советам, как такое можно реализовать. 
Slick не обязателен, может есть другой хороший плагин.

Share this post


Link to post
Share on other sites
19 часов назад, Crystal-3 сказал:

Всем привет!
Есть задачка - сделать карусель, в котором навигация в 2 ряда http://prntscr.com/pb6dlu
Обычно пользуюсь плагином slick. Есть у него в настройках slidesPerRow и rows, с помощью которых можно выстроить визуально в 2 ряда, но увы, навигация работает некорректно.
Буду благодарна советам, как такое можно реализовать. 
Slick не обязателен, может есть другой хороший плагин.

Недавно делал подобную задачу https://leonziger.github.io/c-club.
Пишите, buldog52 собака gmail.com - помогу чем смогу.

 

или дайте псд-макет. Интересно поковыряться

Edited by buldog52

Share this post


Link to post
Share on other sites

Дак это не навигация в два ряда. 

Это обычные превью ссылки. thumb. 
По типу этого https://jsfiddle.net/keithpetrillo/6j7fzwek/
Обсуждения — https://stackoverflow.com/questions/39567327/how-to-create-thumbnail-carousel-with-image-previews-in-slick-js

https://swiperjs.com/demos/  (https://swiperjs.com/demos/310-thumbs-gallery-loop.html) в этом плане мне больше нравится. Там синхронизация проще делается. 
Но и плагин тяжелее. 

Share this post


Link to post
Share on other sites

buldog52, в вашем примере одна карусель в 2 ряда - так да, работает хорошо. Мне нужно сделать 2 синхронные карусели, одна из которых в 2 ряда. Вот с этим и возникают проблемы. 
Макет не могу дать, он не тренировочный.
Спасибо за ответ)

npofopr, ну да, превьюшки.
Спасибо за плагин, посмотрю.


Ещё такой пример нашла http://coolcarousels.frebsite.nl/c/6/ 

 

Share this post


Link to post
Share on other sites
27 минут назад, Crystal-3 сказал:

Ещё такой пример нашла http://coolcarousels.frebsite.nl/c/6/ 

Я лет 5 назад им пользовался. Оно ещё живое?) 
Аккуратнее с этим)

*
 *	jQuery carouFredSel 6.1.0
 *	Demo's and documentation:
 *	caroufredsel.frebsite.nl
 *
 *	Copyright (c) 2012 Fred Heusschen
 *	www.frebsite.nl
 *
 *	Dual licensed under the MIT and GPL licenses.
 *	http://en.wikipedia.org/wiki/MIT_License
 *	http://en.wikipedia.org/wiki/GNU_General_Public_License
 */

 

Share this post


Link to post
Share on other sites

 а нельзя просто по клику на превью  слева отображать ее большую картинку?


 

Share this post


Link to post
Share on other sites
3 часа назад, buldog52 сказал:

 а нельзя просто по клику на превью  слева отображать ее большую картинку?


 

Нет, согласно ТЗ эти 2 карусели работают синхронно.


но у меня уже есть хорошая идея, пилю) 

Share this post


Link to post
Share on other sites
27.09.2019 в 19:15, Crystal-3 сказал:

но у меня уже есть хорошая идея, пилю) 

Поделитесь?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Member Statistics

    46,511
    Total Members
    3,128
    Most Online
    Marking
    Newest Member
    Marking
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.