JavaScript स्लाइडर अपेक्षानुसार काम नहीं कर रहा है

मैं कुछ divs को स्लाइड करने के लिए स्ली लाइब्रेरी का उपयोग कर रहा हूं। मैं उनके सिंटैक्स का अनुसरण कर रहा हूं:

 <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 divs डालता हूं, उदाहरण के लिए, एक दूसरे के बगल में 9 divs हैं (उम्मीद के मुताबिक काम कर रहे हैं), लेकिन आखिरी वाला पहले से नीचे है। उदाहरण के लिए, अगर मैं 6 divs डालता हूं तो वही होता है। 5 एक दूसरे के बगल में हैं और अंतिम नीचे है।