JavaScript Slider Not Working As Expected

I am using Sly library for sliding a couple of divs. I am following their syntax:

 <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();

It almost works, the problem is that if I put 10 divs, for example, there are 9 divs next to each other ( working as expected ), but the last one is below the first. The same happens if I put 6 divs, for example. 5 are one next to each other and the last one is below.

This is probably a css issue - you need to set margins to 0 to make the items fit the container like this:

.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%; }

What’s your css look like?