jQuery 可滚动中心活动框架

发布于 2024-12-22 00:21:33 字数 624 浏览 6 评论 0原文

我正在使用 jQuery Tools Scrollable 插件。我正在尝试使活动框架位于屏幕的中心。

我将可滚动包装器设置为 100% 宽度，效果很好，但活动框架左对齐。我想要的是活动框架位于中心。为了更好的解释，请参阅我想要实现的目标的模型。

如何使活动框架居中？

仅供参考：这是我的结构：

<div class="scrollable">
    <div class="prev browse left disabled"></div>

    <div class="items">
        <div class="pane">
            Content
        </div>
        <div class="pane">
            Content
        </div>
    </div>

    <div class="next browse left"></div>
</div>

谢谢！

原文

I'm using jQuery Tools Scrollable plugin. I'm trying to make it so that the active frame is in the center of the screen.

I have the Scrollable wrapper set to 100% width and it works great, but the active frame is aligned to the left. What I want is for the active frame to be center. For a better explanation, see this mockup of what I'm trying to achieve.

How do I center the active frame?

FYI: This is my structure:

<div class="scrollable">
    <div class="prev browse left disabled"></div>

    <div class="items">
        <div class="pane">
            Content
        </div>
        <div class="pane">
            Content
        </div>
    </div>

    <div class="next browse left"></div>
</div>

Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

泅渡 2024-12-29 00:21:33

根据我的假设，你可以尝试将其放入 CSS：

.items { margin:0 auto; }

From my assumption, you can try putting this for the CSS:

.items { margin:0 auto; }

回复收藏 0 原文

末骤雨初歇 2024-12-29 00:21:33

Calvin 的代码可以工作，但如果您提供要显示照片的内容的大致宽度，效果可能会更好。因为，除非我们给出左/右边距，否则它会使项目位于中心。

.scrollable {
    background-color: black;
    width: 100%;
}
.items {
    margin: 0 auto;
    width: 400px;
}

Code by Calvin works, but again it could be better if you provide approximate width to the content, where you want to show the photos. because, It makes the items at the center unless we give left/right margin.

.scrollable {
    background-color: black;
    width: 100%;
}
.items {
    margin: 0 auto;
    width: 400px;
}

回复收藏 0 原文

半世蒼涼 2024-12-29 00:21:33

我想通了。您不能在 .items 上使用 margin: 0 auto 因为 .items 太宽。 Umesh 试图通过提供 .items 的宽度来解决这个问题，但这不是动态的。此外，jQuery Tools Scrollable 仍然尝试将活动框架定位到左侧。

这就是我所做的。

我将可滚动设置为浏览器的 100% 宽度。 .pane 始终为 800px 宽。

然后我编写了这个 JavaScript：

// Get window width
var winWidth = jQuery(window).width();

// winWidth divided by 2, subtract half the width of .pane
var itemsMargin = (winWidth/2)-400;

// Resize the homepage scrollable panes
jQuery('.scrollable .items').css('margin-left', itemsMargin+'px');

活动 .pane 的中心始终位于屏幕的中心。然后，我设置一个 .resize() 回调，以在调整浏览大小时重新计算左边距。效果很好！

I figured it out. You can't use margin: 0 auto on .items because .items is too wide. Umesh tried to address this by providing a width it .items, but this is not dynamic. Also, jQuery Tools Scrollable still tries to position the active frame to the left anyway.

Here is what i did.

I setup the scrollable as 100% width of the browser. The .pane is 800px wide all the time.

Then I wrote this JavaScript:

// Get window width
var winWidth = jQuery(window).width();

// winWidth divided by 2, subtract half the width of .pane
var itemsMargin = (winWidth/2)-400;

// Resize the homepage scrollable panes
jQuery('.scrollable .items').css('margin-left', itemsMargin+'px');

This has the center of the active .pane allways in the center of the screen. I then setup a .resize() call back to reclaculate the left margin when the browse is resized. It works great!

回复收藏 0 原文

~没有更多了~