carouFredSel: показать частичные элементы?

Question

Я использую carouFredSel для создания вертикальной карусели.Все работает отлично, за исключением того, что я предпочел бы, чтобы частичные элементы отображались внизу, обрезались, а не были скрыты.Таким образом, это будет указывать пользователям, что есть дополнительные элементы, которые можно прокручивать.

Я читал документацию , но пока не могу сказать, возможно ли то, что я ищу.

Проверьте JSFiddle, чтобы понять, что я имею в виду .Смотрите самый нижний элемент на странице.

Javascript

$("ul").carouFredSel({
    direction: "up",
    align: "top",
    width: 100,
    height: "100%",
    items: {
        visible: "variable",
        width: 100,
        height: "variable"
    },
    scroll: {
        items: 1,
        mousewheel: true,
        easing: "swing",
        duration: 500
    },
    auto: false,
    prev: {
        button: ".prev",
        key: "up"
    },
    next: {
        button: ".next",
        key: "down"
    }
});​

Answer 1

Это немного взломать, но это работает. Установите высоту скроллера (в данном случае ul) равной 150%, а родительский элемент (в данном случае body) - overflow: hidden. Теперь самый нижний элемент находится вне экрана.

Javascript

$("ul").carouFredSel({
    height: "150%"
});

CSS

body {
    overflow: hidden;
    }

Answer 2

Ха, caroufredsel поддерживает его, никаких взломов не требуется :))!Вы можете достичь этого с помощью следующей опции:

items: {
    visible: '+1'
}

РЕДАКТИРОВАТЬ: Это страдает от проблемы, хотя.Если количество всех видимых элементов + 1 == количество всех элементов, то карусель не может быть прокручена, даже если одно изображение видно только частично.Вы можете преодолеть эту проблему, установив, например, minimum: 1, но это не всегда так (например, если число изображений является динамическим и вы не хотите, чтобы обработчики прокрутки появлялись, когда имеется только одно или два изображения.).

Answer 3

Следующий невидимый элемент в вертикальной карусели отталкивается от поля.В настоящее время я переопределяю его следующей функцией:

function cropCarousel () {
    var visibleElements = this.triggerHandler("currentVisible"), // show all visible
    $lastElement = $(visibleElements[visibleElements.length - 1]); // get the last one

    $lastElement.css('margin-bottom', '30px'); // amend the margin
};

cropCarousel.call($('#your_carousel_id'));

Недостатком является то, что вам придется вызывать эту функцию при инициализации карусели и при событиях вверх и вниз.Но это работает;)