Question

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

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

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

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

我注意到其他人询问FlexSlider字幕时会使用名为＆＃34; flex-caption的类。＆＃34;这对我来说没有意义，因为字符串＆＃34; flex-caption＆＃34;在我最新版本的 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对this question的回复，我决定使用JavaScript查找段落标记的像素宽度，然后在分配之前从滑块框的宽度（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'
    });

});

我是否使用＆＃34; .flexslider p＆＃34;似乎并不重要。或＆＃34; .flex-caption＆＃34;选择p标签。

Answer 1

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

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

应该是：

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

使用jQuery在FlexSlider上居中标题

1 个答案: