Вертикальная карусель на jquery

Вертикальная карусель на jquery


postcss


.designer-list-top, .designer-list-bottom {
    width: 15px;
    height: 15px;
    border-bottom: 1px solid #9ea0a3;
    border-left: 1px solid #9ea0a3;
    margin: auto;
    cursor: pointer;

}

.designer-list-top {
    transform: rotate(135deg);
}
.designer-list-bottom {
    transform: rotate(-45deg);
}

.designer-list {
    overflow: hidden;
    max-height:260px;
     position:relative;

    ul {
        list-style: none;
        padding:0;
        text-align: center;
        position:relative;

        li {
        padding:2px 0;
            a {
                font-family: Conv_FuturaDemiC;
                color: #9ea0a3;
                text-decoration: none;
                text-transform: uppercase;
                &:hover {
                     color: #2e2e2e;
                 }
            }
        }
    }
}

javascript


    $(document).ready(function () {
        var leftUIEl = $('.designer-list-top');
        var rightUIEl = $('.designer-list-bottom');
        var elementsList = $('.list-name-designer');

        var pixelsOffset = 22;
        var currentLeftValue = 0;
        var elementsCount = elementsList.find('li').length;
        var minimumOffset = -((elementsCount - 12) * pixelsOffset);
        var maximumOffset = 0;

        leftUIEl.click(function () {
            if (currentLeftValue != maximumOffset) {
                currentLeftValue += 22;
                elementsList.animate({top: currentLeftValue + "px"}, 300);
            } else {         // для цикличности ставим это условие 
              currentLeftValue = minimumOffset;
             elementsList.animate({ top : currentLeftValue + «px»}, 500);
            }

        });

        rightUIEl.click(function () {
            if (currentLeftValue != minimumOffset) {
                currentLeftValue -= 22;
                elementsList.animate({top: currentLeftValue + "px"}, 300);
            } else {      // для цикличности ставим это условие 
              currentLeftValue = 0;
              elementsList.animate({ top : currentLeftValue + «px»}, 500);
            }
        });
    });

Отправить комментарий

Другие статьи рубрики "карусели"