JavaScript slider 未按预期工作

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 个 div，例如，有 9 个 div 彼此相邻(按预期工作)，但最后一个低于第一个。例如，如果我放置 6 个 div，也会发生同样的情况。 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 是什么样的？