मैं कुछ 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 एक दूसरे के बगल में हैं और अंतिम नीचे है।

0
Petur Ulev 26 अक्टूबर 2019, 11:23

1 उत्तर

सबसे बढ़िया उत्तर

यह शायद एक सीएसएस मुद्दा है - आइटम को इस तरह से कंटेनर में फिट करने के लिए आपको मार्जिन को 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%; }

आपका सीएसएस कैसा दिखता है?

0
Matt Reynolds 26 अक्टूबर 2019, 08:55