使jquery滑动滑块宽度为100%

make jquery slidy slider width 100%

本文关键字：100% jquery      更新时间：2023-09-26

我正在使用这个滑块->http://writerservices.us/slidy/以供您参考。

我需要使滑块宽度为100%，所以在每个分辨率下都保持100%。

<script type="text/javascript">
        $(function() {
            $('#default').slidy();
            $('#pause').slidy({
                animation:  'mouseenter',
                cursor:     'wait',
                pause:      true
            });
            $('#menu').slidy({
                animation:  'slide',
                children:   'a',
                menu:       true,
                pause:      true,
                speed:      1100,
                time:       400001111111111111,
                width:      1300,
                height:     400
            });

            $('.group').slidy({
                animation:  'slide',
                height:     97,
                width:      240
            });
        });
    </script>

这是html js代码，有可变宽度，打赌当我写width: "100%"时，它不会做我想做的事。

html滑块代码看起来像

 <div id="menu">
   <a href="javascript:void(0);"><img src="img/image-2.jpg" title="Cargo handling"/></a>
 <a href="javascript:void(0);"><img src="img/image-3.jpg" title="Cargo charter flights"/></a>
 </div>

试试这个小提琴

    $('#menu').slidy({
        animation: 'slide',
        children: 'a',
        menu: true,
        pause: true,
        speed: 1100,
        time: 400001111111111111,
        width: $(document).width(),
        height: $(document).height()
    });

根据slidy自己的文档，"宽度"选项始终以像素为单位，而不是百分比(https://github.com/wbotelhos/slidy)。

我建议使用不同的滑块来支持百分比宽度。

使用宽度："100%！重要"

<div id="default" style="width:100% !important;">
            <img src="img/image-1.jpg" style="width:100% !important;"/>
            <img src="img/image-2.jpg" style="width:100% !important;"/>
            <img src="img/image-3.jpg" style="width:100% !important;"/>
        </div
相关文章：