Как добавить карусель на страницу BootsFaces?

Я нахожусь на BootsFaces 0.7.0 и пытаюсь добавить carousel на страницу. На основании ответа на мой вопрос «BootsFaces selectMultiMenu does not render correctly», я догадался, я мог бы просто добавить ресурсы вручную:Как добавить карусель на страницу BootsFaces?

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

После этого, кажется, что библиотека карусельного не поставляется с BootsFaces (ресурс не был найден). Поэтому я попытался добавить carousel Javascript к моему проекту. Это заставило сценарий запускаться, но CSS, кажется, отсутствует. Любые идеи о том, как изолировать CSS-карусель от Bootstrap и загружать его на страницу BootsFaces? Или как заменить CSS BootsFaces (если это поможет)?

Если нет лучшего способа, я думаю, что буду писать обработчик ресурсов, чтобы заменить содержимое /javax.faces.resource/css/core.css?ln=bsf.

источник

2015-09-11 Jasper de Vries

Давайте сделаем карусель официальным компонентом BootsFaces! –

Я предполагаю, что ваш оригинальный подход должен работать. Вы можете получить исходные файлы LESS файла CSS на странице https://github.com/twbs/bootstrap/blob/master/less/carousel.less. Вероятно, самый простой способ добавить исходный код JS и CSS - добавить карусель в файл сборки BootsFaces Gradle. Если вам нужна дополнительная помощь, просто скажите мне. –

Просто увидел, что есть старая версия CSS, доступная по адресу http://www.whatibroke.com/?p=971. Вы не должны использовать его в производстве, потому что ему не менее 16 месяцев (возможно, он даже не совместим с Bootstrap 3.3.5), но, возможно, он поможет вам начать работу. –

Я начал реализовывать компонент <b:carousel> в BootsFaces 0.8.0. На момент написания статьи (15 сентября 2015 г.) вы уже можете ее протестировать, если вы создадите BootsFaces из источника.

В том же время - или, если вам нужно больше гибкости, чем мой компонент предложение - вы можете скачать CSS и JS файлы из репозитория BootsFaces (carousel.css, carousel.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>

источник

2015-09-15 10:40:57

Как добавить карусель на страницу BootsFaces?

ответ

Смежные вопросы