如何将轮播添加到 BootsFaces 页面？

Question

我正在使用 BootsFaces 0.7.0 并尝试将 carousel 添加到页面。根据我的问题“BootsFaces selectMultiMenu does not render correctly”的答案，我猜我可以手动添加资源：

<h:outputScript library="bsf" name="js/carousel.js" target="body">

这样做之后，轮播库似乎没有与 BootsFaces 捆绑在一起（找不到资源）。所以我尝试将carousel Javascript 添加到我的项目中。这导致脚本运行，但似乎缺少 CSS。关于如何从 Bootstrap 中分离出特定于轮播的 CSS 并将其加载到 BootsFaces 页面中的任何想法？或者如何替换 BootsFaces CSS（如果有帮助的话）？

如果没有更好的方法，我想我会编写一个资源处理程序来替换 /javax.faces.resource/css/core.css?ln=bsf 的内容。

Answer 1

我已经开始在 BootsFaces 0.8.0 中实现 <b:carousel> 组件。在撰写本文时（2015 年 9 月 15 日），如果您从源代码构建 BootsFaces，您已经可以对其进行测试。

与此同时 - 或者如果您需要比我的组件提供更多的灵活性 - 您可以从 BootsFaces 存储库（carousel.css、carousel.js）下载 CSS 和 JS 文件 并像这样构建自己的轮播：

    <!-- If you're using BootsFaces 0.7.0 or below, you need to download the CSS and JS files
        from
        https://github.com/TheCoder4eu/BootsFaces-OSP/blob/master/mavenResources/META-INF/resources/bsf/css/carousel.css
        and 
        https://github.com/TheCoder4eu/BootsFaces-OSP/blob/master/mavenResources/META-INF/resources/bsf/js/carousel.js
        and correct the next two lines! -->
    <h:outputStylesheet library="bsf" name="css/carousel.css" />
    <h:outputScript library="bsf" name="js/carousel.js" />
    <div id="myCarousel" class="carousel slide" data-ride="carousel" style="width:800px">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
        <img src="Valladolid1.png" alt="Valladolid" style="width:800px;height:600px"/>
        </div>

        <div class="item">
        <img src="Valladolid2.png" alt="Valladolid" style="width:800px;height:600px"/>
        </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
    </div>