Плагин jQuery Marquee - настройка начальной позиции

Я использую этот плагин jq: http://plugins.jquery.com/marquee/, ( github). Параметры API довольно ограничены, и нет никаких упоминаний о начальной позиции. Я хочу, чтобы он начинался с первого элемента выделения, выровненного по левому краю контейнера, а не по правому краю, что по умолчанию.

Вот что я собрал до сих пор, но, как вы можете видеть из скрипки, это далеко не идеально:

скрипка

HTML:

<div class="wrapper">
    <div class='marquee'>
        <div class="ablock">1</div>
        <div class="ablock">2</div>
        <div class="ablock">3</div>
        <div class="ablock">4</div>
        <div class="ablock">5</div>
        <div class="ablock">6</div>
        <div class="ablock">7</div>
        <div class="ablock">8</div>
    </div>
</div>

CSS:

body {
    margin: 10px;
    font-family:'Lato', sans-serif;
}
.marquee {
    width: 100%;
    overflow: hidden;
    border:1px solid #ccc;
    background: black;
    color: rgb(202, 255, 195);
}
.ablock {
    width:50px;
    height:50px;
    background:red;
    margin-left:10px;
    display:inline-block;
}
.ablock:first-child {
    margin-left:0;
}

.wrapper{
    width:50%;
}

JQuery:

var offset_is_set = false;

$(function () {
    $('.marquee').bind('beforeStarting', function () {
        if (!offset_is_set) {
            $('.marquee > div > .js-marquee > .ablock:first-child').css('margin-left', '-' + $('.wrapper').width() + 'px');
            offset_is_set = true;
        }
    });

      $('.marquee').marquee({
        duration: 10000,
        duplicated: true,
        pauseOnHover: true,
        gap: 15
    });
});

0 ответов

Другие вопросы по тегам