darsain / sly

JavaScript library for one-directional scrolling with item based navigation support.
http://darsa.in/sly
2.87k stars 497 forks source link

trouble calculating the width of the <ul> tag. #308

Open sangmook-ai opened 1 year ago

sangmook-ai commented 1 year ago
jQuery(function ($) {
    'use strict';
    (function () {
        let $frame = $('#adotRewordoneperframe');
        var $wrap = $frame.parent();
        // Call Sly on frame
        $frame.sly({
            horizontal: 1,
            itemNav: 'forceCentered',
            smart: 1,
            activateMiddle: 1,
            mouseDragging: 1,
            touchDragging: 1,
            releaseSwing: 1,
            startAt: 1,
            speed: 300,
            elasticBounds: 1,
            easing: 'easeOutExpo',
            dragHandle: 1,
            dynamicHandle: 1,
            clickBar: 1,
            // Buttons
            prev: $wrap.find('.adotRewordprev'),
            next: $wrap.find('.adotRewordnext')
        });
    }());
});

I have declared it like this, and the width of the <img> inside the <li> tag is 415.13. There are 13 <li> elements. However, sly set the width of the <ul> tag to 5395px, and there is an issue where the last <li> goes below the first <li>. I think the width of the <ul> should be larger than 5396.69. Could it be that I am mishandling the CSS?

document.getElementsByClassName("adotRewordclearfix")[0].style.width = "5397px";

Even if I modify it like this after the jQuery declaration is finished, it doesn't change. Is there any solution?