Question

基本上我有一个jQuery图像轮播，它是浏览器的全宽，一切在我的电脑上都很好（分辨率1980x1020）。但是，在较小的分辨率下，旋转木马/图像根本不会调整大小，所以它看起来很糟糕。我会发布截图以使其更容易解释，但我确实只是让我的帐户提出这个问题并且没有足够的“声誉”来发布图片。

基本上，页面上的每个元素都会相应地重新调整大小，因为它位于设置为width: 100%的包装器内，然后元素本身的最小宽度为1100px和{{1}所以当浏览器调整大小时，它会保持居中。图像轮播的风格当然不同，因为旋转木马和图像必须是宽度：100％，所以我不确定如何去做这个？

jQuery的：

margin: 0 auto

HTML：

$(document).ready(function () {
    // Set the interval to be 5 seconds
    var imgWidth = $(".imgCar").width();
    var t = setInterval(function () {
        $("#carousel ul").animate({ marginLeft: -imgWidth }, imgWidth, function () {
            $(this).find("li:last").after($(this).find("li:first"));
            $(this).css({ marginLeft: 0 });
        })
    }, 10000);

CSS：

<div id="carousel">
    <ul>
        <li><img class="imgCar" src="/images/homepage carousel/pic1.jpg" /><div><h1>BRAND NEW OFFICES FOR SALE IN GLASGOW</h1><p>Over 200 offices for sale in Glasgow</p><a href="#">More Info</a></div></li>
        <li><img class="imgCar" src="/images/homepage carousel/pic2.jpg" /><div><h1>HEAD OFFICE REFURB COMPLETE</h1><p>The refurbishment of our head office is complete</p><a href="#">Take a look</a></div></li>
    </ul>
</div>

非常感谢任何帮助。

Answer 1

我认为你需要在窗口调整大小上附加一个函数

$( window ).resize(function() {
         //Resize your carousel based on the window size
 });

如何用CSS调整jQuery轮播的大小？

1 个答案: