carouFredSel активный слайд

208

21 октября 2018, 13:20

Подключил на сайт плагин jquery carouFredSel. Потребовалось, чтобы выводилось только 2 изображения и при загрузке страницы (инициализации плагина) активным был именно первый слайд. Но что бы я ни прописал в настройки, упёрто нельзя кликнуть по второму слайду (я так понимаю плагин думает что именно он сейчас активный, т.к. по умолчанию отображается 3 слайда и активный всегда центральный).

Код:

$('#thumbs').carouFredSel({
        synchronise: ['#images', false, true],
        auto: false,
        width: 450,
        items: {
            visible: 2,
            start: 0,
        },
        classnames: {
            selected: "selected"
        },
        onCreate: function(data)
        {
            var $items = $('#thumbs').children();
            $items.removeClass('selected');
            $items.eq(0).addClass('selected');
        },
        /*scroll: {
            onBefore: function( data ) {
                data.items.old.eq(1).removeClass('selected');
                data.items.visible.eq(1).addClass('selected');
            }
        },*/
        prev: '#prev',
        next: '#next'
    });

Что я делаю не так?

Задача:

Чтобы видно было одновременно только 2 слайда
Первый слева - активный, по клику на него ничего не происходит
Листаться должно только по клику на второй (правый) и только справа налево.

Версия плагина 6.2.1

Answer 1

Решение:

$(function() {
    $('#thumbs').carouFredSel({
        synchronise: ['#images', false, true],
        auto: false,
        width: 450,
        items: {
            visible: 2,
            start: 0,
        },
        classnames: {
            selected: "selected"
        },
        onCreate: function(data)
        {
            var $items = $('#thumbs').children();
            $items.removeClass('selected');
            $items.eq(0).addClass('selected');
        }
    });
    $('#images').carouFredSel({
        auto: false,
        items: 1,
        scroll: {
            fx: 'fade'
        }
    });
    $('#thumbs img').click(function(e) {
        var $items = $('#thumbs').children();
            $items.removeClass('selected');
            $(this).addClass('selected');
        $('#thumbs').trigger('slideTo', $(this));
    });
});