Jquery 具有百分比和响应性设计的动态宽度

我正在设计我的投资组合，其中有一个区域有水平的幻灯片，比如尾波幻灯片。我的问题是，JS生成的宽度以px为单位，我需要以%为单位设置宽度，以便在大多数屏幕分辨率下工作。当我尝试更改某些内容时，宽度变为%，但幻灯片垂直移动

示例HTML：

<div class="scroll">

<!-- the element that will be scrolled during the effect -->
<div class="scrollContainer">
<!-- our individual panels -->

<!-- PROJECT 1 -->
<article class="panel" id="work1">
<figure><img src="images/works/project1.png" alt="Alt Text" title="Title Text"/></figure>

<header>
    <h1>TITLE</h1>
</header>

    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu diam elit, non sodales magna. Nam ut imperdiet metus. Nam in lectus eros, non varius nunc. In elementum, urna in pulvinar vestibulum, ligula ipsum pharetra massa, ac porta neque turpis vel ligula. Morbi nec justo vitae urna luctus suscipit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi semper cursus nisi nec tincidunt. Donec non sapien at turpis iaculis iaculis vel at eros. Phasellus dictum consectetur dui, sed imperdiet diam rhoncus et. Aliquam egestas, nisl ut pellentesque egestas, sapien orci tristique lacus, quis egestas odio enim a felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque mattis dapibus libero, nec ultrices neque iaculis nec.</p>
    <p> Ut quis purus diam. Vestibulum bibendum, ipsum ac pharetra pretium, lectus justo molestie ligula, nec dignissim ante nulla non nulla. Maecenas sit amet elit metus. Nulla dignissim pretium porttitor. Cras pellentesque condimentum fringilla. Fusce ac odio convallis ante venenatis interdum et et mauris. Donec tincidunt sapien nec enim egestas sollicitudin. Proin sit amet metus ac eros commodo dapibus id vel neque. Nulla in luctus felis. Sed at urna magna, ac vestibulum neque. Nam dictum elementum pharetra.</p>
</article>

<!-- PROJECT 2 -->
<article class="panel" id="work2">
<figure><img src="images/works/project2.png" alt="Alt Text" title="Title Text"/></figure>

<header>
    <h1>TITLE</h1>
</header>

    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu diam elit, non sodales magna. Nam ut imperdiet metus. Nam in lectus eros, non varius nunc. In elementum, urna in pulvinar vestibulum, ligula ipsum pharetra massa, ac porta neque turpis vel ligula. Morbi nec justo vitae urna luctus suscipit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi semper cursus nisi nec tincidunt. Donec non sapien at turpis iaculis iaculis vel at eros. Phasellus dictum consectetur dui, sed imperdiet diam rhoncus et. Aliquam egestas, nisl ut pellentesque egestas, sapien orci tristique lacus, quis egestas odio enim a felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque mattis dapibus libero, nec ultrices neque iaculis nec.</p>
    <p> Ut quis purus diam. Vestibulum bibendum, ipsum ac pharetra pretium, lectus justo molestie ligula, nec dignissim ante nulla non nulla. Maecenas sit amet elit metus. Nulla dignissim pretium porttitor. Cras pellentesque condimentum fringilla. Fusce ac odio convallis ante venenatis interdum et et mauris. Donec tincidunt sapien nec enim egestas sollicitudin. Proin sit amet metus ac eros commodo dapibus id vel neque. Nulla in luctus felis. Sed at urna magna, ac vestibulum neque. Nam dictum elementum pharetra.</p>

<figure>
    <img src="images/works/project2a.png" class="workscenter" alt="Alt Text" title="Title Text"/><br/>
    <img src="images/works/project2b.png" class="workscenter" alt="Alt Text" title="Title Text"/><br/>
    <img src="images/works/project2c.png" class="workscenter" alt="Alt Text" title="Title Text"/>
</figure>

</article>
</div>
</div>

有人知道我想要什么吗

---

谢谢大家。

使用更简单的解决方案，如CSS3幻灯片：

---

不要在我的javascript知识水平较低的情况下工作。

jQuery(document).ready(function($) {
    // Container
    var container = $('.scroll');

    // Navigation
    var navContainer = $('#slider .navigation');
    var navLink = $('#slider .navigation li a');

    // Slides
    var panelsContainer = $('.scroll .scrollContainer');
    var panels = $('.scroll .scrollContainer > article');
    var panelWidth = panels[0].offsetWidth;

    // Float all slides side by side
    panels.css({
        'float' : 'left',
        'position' : 'relative',
        'width': panelWidth,
        'height': 'auto',
        'opacity': 0
    });

    // Set the width of the first slide
    container.css({
        'width': panelWidth,
        'height': panels[0].offsetHeight,
        'overflow': 'hidden'
    });

    // Set the total width to allow the slide effect
    panelsContainer.css({
        'width': panelWidth * panels.length,
    });

    // Activate the first slide
    navLink.eq(0).addClass('selected');
    panels.eq(0).css('opacity', 1);

    // Verify the links where is possible to slide
    $('a').bind('click', function(e) {
        var target = $(this).attr('href');

        if($(target).html() !== undefined ) {
            $('html, body').stop().animate({
                scrollTop: $(target).offset().top
            }, 1500, 'easeInOutExpo');

            if($(target).parent('div').hasClass('scrollContainer')) {
                $('#slider .navigation li a').removeClass('selected');
                $('#slider .navigation li a[href=' + target + ']').addClass('selected');

                // Actual slide
                var current = $('#slider .navigation li a.selected');

                // Slide to be opened
                var index = current.closest('li').index();

                // Dinâmica height with plus 70px at the end
                container.css('height', $(target).height() + 70);

                // Set the actual slide
                navLink.removeClass('selected');
                current.addClass('selected');

                // Show the actual slide
                panels.css('opacity', 1);

                // Create the transition effect
                $(container).scrollTo($('.scroll .scrollContainer > article').eq(index), 800);

                // Hidden all others slides
                setTimeout(function() {
                    panels.css('opacity', 0);
                    panels.eq(index).css('opacity', 1);
                }, 800);
            }
        }
    });

    // Fix to makes right wrong projects
    if(window.location.hash) {
        $('a[href="' + window.location.hash + '"]:first').trigger('click');
    }
})