Question

我在BootsFaces 0.7.0上尝试向页面添加carousel。根据我的问题＆＃34; BootsFaces selectMultiMenu does not render correctly＆＃34;的答案，我猜我可以手工添加资源：

<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 repo（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>

如何在BootsFaces页面添加轮播？

1 个答案: