html - 如何在 Broadleaf-Ecommerce 上创建带有旋转图像的轮播式横幅。

Question

我想在阔叶电子商务模板的主页上制作带有旋转图像的轮播式横幅。我无法弄清楚如何实现这一目标。请指导我。

我尝试在 home.html 中使用以下代码，但没有显示任何内容。

<blc:content contentType="Homepage Banner Ad" />       
        <div id="banners" th:if="${contentItem !=null and contentItem['targetUrl'] != null and contentItem['imageUrl'] != null}">
           <ul>
             <li th:each="contentItem : ${contentItems}">
                <a th:href="@{${contentItem['targetUrl']}}"><img th:src="@{${contentItem['imageUrl']}}" style="width:100%;"/></a> 
            </li>

           </ul> 
        </div>

我通过管理面板添加了 3 个横幅图像，优先级为 1,2 和 3

Answer 1

对于轮播，您需要使用 javascript 或任何其他等效的客户端脚本。我更喜欢jCarousel和Jssor Slider。