如何向BootsFaces页面添加旋转木马？

Question

我正在使用BootsFaces 0.7.0并试图将旋转木马添加到页面中。基于对我的问题"BootsFaces selectMultiMenu没有正确地呈现“的回答，我猜想我可以手工添加资源：

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

这样做之后，似乎没有将旋转木马库与BootsFaces捆绑在一起(没有找到资源)。因此，我尝试将旋转木马Javascript添加到我的项目中。这导致脚本被运行，但是CSS似乎丢失了。对于如何将旋转木马特定的CSS从引导程序中分离出来并加载到BootsFaces页面上，有什么想法吗？或者如何替换BootsFaces CSS (如果这样会有所帮助)？

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

Answer 1

我已经开始在<b:carousel> 0.8.0中实现一个BootsFaces组件。在编写本报告时(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>