使用 jQuery 在 FlexSlider 上居中字幕

Centering captions on FlexSlider using jQuery

本文关键字：字幕 FlexSlider jQuery 使用      更新时间：2023-09-26

FlexSlider 2 似乎使用来自 flexslider 第 97 行的 css 将字幕放置在单个幻灯片底部上方 10 像素的位置.css：

.flexslider p {
    position: absolute;
    bottom: 10px;
}

为此，我添加了自己的 CSS：

.flexslider p {
    font-family: 'Exo', san-serif;
    font-size: 18pt;
    text-align: center;
}

我注意到其他询问FlexSlider字幕的人使用一个名为"flex-caption"的类。这对我来说没有意义，因为字符串"flex-caption"在我相对较新的 flexslider.css 和 jquery.flexslider-min.js 版本中根本没有出现。尽管如此，我还是将类添加到我的 HTML 中：

<div class="flexslider">
     <ul class="slides">
         <li>
             <img src="images/slider/craft-the-future.jpg" />
             <p class="flex-caption">Craft the future!</p>
         </li>
         <li>
             <img src="images/slider/plugged-in.jpg" />
         </li>
         <li>
             <img src="images/slider/athletics.jpg" />
         </li>
         <li>
             <img src="images/slider/make-reality.jpg" />
         </li>
     </ul>
</div>

我决定我需要在绝对定位的段落标签中添加一个左（或右）属性。主要基于Grinn对这个问题的回答，我决定使用JavaScript来查找段落标签的像素宽度，然后在将值分配给left属性之前，从滑块框的宽度（720像素）中减去该宽度。

我不声称自己了解 JavaScript 或 jQuery，但我试图通过可用的教程和文档尽我所能。我不认为我想出如何按原样加载Grinn的普通JavaScript重代码，所以我决定将该方法转换为更重jQuery的格式。我终于成功地让浏览器识别了jQuery，因为当我重新加载时确实会出现警报：

$(document).ready(function() {
    var caption = $(".flexslider p");
    alert(caption.length); // For debugging only
    var indent = 720 - $(caption.innerWidth);
    $(caption).css({
        left: 'indent'
    });
});

我使用".flexslider p"还是".flex-caption"来选择p标签似乎并不重要。

您将 left 的值分配为字符串而不是 indent 变量。

   $(caption).css({
        left: 'indent'
    });

应该是：

   $(caption).css({
        left: indent
    });
相关文章：