Слайдер Javascript не работает должным образом

Question

Я использую библиотеку Sly для скольжения пары div. Я придерживаюсь их синтаксиса:

 <div id="wrapperSly">
        <div class="frame" id="weatherSlider">
            <div id="slidee">
                {{#each forecast.data}}
                    <div id="0hrs">
                        <div id="0time">{{this.hour}}</div>
                        <div id="0currTemp">{{this.temp}}&deg</div>
                    </div>
                {{/each}}
            </div>
        </div>
    </div>
        // js file:
        let slyFrame = $('#weatherSlider');
        let $slidee = $('#slidee');
        let $wrap = slyFrame.parent();
        //  slyFrame.sly(false);
        // Call Sly on frame
        slyFrame.sly({
            horizontal: 1,
            itemNav: 'basic',
            smart: 1,
            activateOn: 'click',
            mouseDragging: 1,
            touchDragging: 1,
            releaseSwing: 1,
            startAt: 3,
            scrollBy: 1,
            activatePageOn: 'click',
            speed: 300,
            elasticBounds: 1,
            easing: 'easeOutExpo',
            dragHandle: 1,
            dynamicHandle: 1,
            clickBar: 1
        }).init();

Это почти работает, проблема в том, что если я поставлю, например, 10 делителей, то рядом друг с другом будет 9 делений (работает, как и ожидалось), но последнийниже первого. То же самое происходит, если я поставлю 6 делений, например. 5 рядом друг с другом, а последний ниже. Буду признателен за любую помощь.

Answer 1

Это, вероятно, проблема css - вам нужно установить поля на 0, чтобы элементы помещались в контейнер следующим образом:

.frame { width: 100%; height: 160px; padding: 0; }
.frame .slidee { margin: 0; padding: 0; height: 100%; list-style: none; }
.frame .slidee li { float: left; margin: 0 5px 0 0; padding: 0; width: 120px; height: 100%; }

Как выглядит ваш css?