Каким слайдером будет проще такое сделать?

Question

[Dark19]

Доброго времени суток! Дизайнер нарисовал макет и там есть вот такой слайдер
Подскажите каким jquery плагином его будет проще сделать? Можно ли как-то такое сделать на ow-carousel2?

Comments

[Ankhena]

Вам только навигацию резвернуть и перекрасить надо?

[Dark19]

Ankhena W: собственно мне нужно чтобы навигация по цифрам работала совместно с перелистыванием слайдера, то есть чтобы они были связанные между собой и чтобы был loop.
Я делал через owl-carousel2 так, но тут есть косяки в зависимости от количества слайдов:

$('.owl-carousel').owlCarousel({
        items:1,
        mouseDrag: false,
        touchDrag: false,
        animateOut: 'zoomOut',
        animateIn: 'zoomIn',
        loop: true,
        lazyLoad: true,
        autoplay: true,
        autoplayHoverPause: true,
        autoplaySpeed: 300,
        dotsSpeed: 300,
        navSpeed: 300,
        dots: false,
        nav: true,
        navText: ['<span class="icon icon-nav-top"/>','<span class="icon icon-nav-bottom"/>'],
        URLhashListener:true,
        startPosition: 'slide1',
        onTranslated: function (e){
            var hashEl = $('.slider-hash-item');
            var item = e.item.index - 1;
            console.log(item);
            hashEl.each(function(index){
                if(index + 1 === item){
                    $(this).addClass('active');
                    $(this).siblings().removeClass('active');
                }
                /*else if(item === 0){
                    hashEl.last().addClass('active');
                    hashEl.last().siblings().removeClass('active');
                }*/
                else{
                    hashEl.eq(0).addClass('active');
                    hashEl.eq(0).siblings().removeClass('active');
                }
            });
        }
    });

[Ankhena]

Dark19: Да к обычным буллетам примените https://webref.ru/css/counter-reset и стилизуйте. Вроде все.

Answer 1

[Егор Живагин]

Я бы сказал, что это вполне укладывается в вертикальный slick + связаный с ним большой слайдер (в демо есть похожий пример) .

Answer 2

[lukoie]

Здесь вопрос не в плагине сейчас. А какой UX и анимация у данной карусели в видении у дизайнера. Что должно происходить при смене слайдов, по крайней мере с навигацией?