javaScript/HTML - 带有 bxslider 的字幕

javaScript/HTML -Captions with bxslider

本文关键字：bxslider 字幕 带有 HTML javaScript      更新时间：2023-09-26

我正在使用bxslider作为我的模板。 我必须在每张图片的底部显示一个标题。

<ul class="bxslider">
                    <pictures:each bean="${bean}" companyType="${companyType }" pictureList="${pictureList }">
                        <g:if test = "${picture.getLargeImageURL() != null && picture.getThumbnailImageURL() != null}">
                            <li>
                                    <img style="height: 240px; width: 100%"  src="${picture.getLargeImageURL()}" alt="${picture.copyright.copyrightify()}" title="${picture.caption.linkify()}"/>
                            </li>
                        </g:if>
                        <g:elseif test="${largeFileName != null && thumbnailFileName != null }">
                            <li>
                                    <img src="${resource(dir:'imgService',file:largeFileName)}" style="height: 240px; width: 100%" alt="${picture.copyright.copyrightify()}" title="${picture.caption.linkify()}"/>
                            </li>
                        </g:elseif>
                    </pictures:each>
                </ul>

如何显示标题？

http://bxslider.com/examples/image-slideshow-captions

只需在调用 bxslider 时添加以下属性：

 $('.bxslider').bxSlider({
            mode:'fade',
            captions: true
            });
相关文章：