122 lines
4.3 KiB
Handlebars
122 lines
4.3 KiB
Handlebars
<style>
|
|
#carousel-{{cls}} > * {
|
|
z-index: 2;
|
|
}
|
|
#carousel-{{cls}}:after {
|
|
display: block;
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 0;
|
|
width: 100%;
|
|
line-height: 500px;
|
|
text-align: center;
|
|
content: 'Loading ...';
|
|
}
|
|
</style>
|
|
|
|
<div class="modal fade {{cls}}" tabindex="-1" role="dialog">
|
|
<div class="modal-dialog" style="width: auto; max-width: 1026px !important;" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
|
<h4 class="modal-title">{{#translate}}{{title}}{{/translate}}</h4>
|
|
</div>
|
|
<div id="carousel-{{cls}}" class="carousel slide" data-interval="false" style="min-height: 500px;">
|
|
<!-- Indicators -->
|
|
<ol class="carousel-indicators">
|
|
<li data-target="#carousel-{{cls}}" data-slide-to="0" class="active"></li>
|
|
<li data-target="#carousel-{{cls}}" data-slide-to="1"></li>
|
|
<li data-target="#carousel-{{cls}}" data-slide-to="2"></li>
|
|
</ol>
|
|
|
|
<!-- Wrapper for slides -->
|
|
<div class="carousel-inner" role="listbox">
|
|
|
|
{{#if img01}}
|
|
<div class="item active">
|
|
<img data-src="{{img01}}">
|
|
</div>
|
|
{{/if}}
|
|
|
|
{{#if img02}}
|
|
<div class="item">
|
|
<img data-src="{{img02}}">
|
|
</div>
|
|
{{/if}}
|
|
|
|
{{#if img03}}
|
|
<div class="item">
|
|
<img data-src="{{img03}}">
|
|
</div>
|
|
{{/if}}
|
|
|
|
{{#if img04}}
|
|
<div class="item">
|
|
<img data-src="{{img04}}">
|
|
</div>
|
|
{{/if}}
|
|
|
|
{{#if img05}}
|
|
<div class="item">
|
|
<img data-src="{{img05}}">
|
|
</div>
|
|
{{/if}}
|
|
|
|
{{#if img06}}
|
|
<div class="item">
|
|
<img data-src="{{img06}}">
|
|
</div>
|
|
{{/if}}
|
|
|
|
{{#if img07}}
|
|
<div class="item">
|
|
<img data-src="{{img07}}">
|
|
</div>
|
|
{{/if}}
|
|
|
|
{{#if img08}}
|
|
<div class="item">
|
|
<img data-src="{{img08}}">
|
|
</div>
|
|
{{/if}}
|
|
|
|
{{#if img09}}
|
|
<div class="item">
|
|
<img data-src="{{img09}}">
|
|
</div>
|
|
{{/if}}
|
|
|
|
{{#if img10}}
|
|
<div class="item">
|
|
<img data-src="{{img10}}">
|
|
</div>
|
|
{{/if}}
|
|
|
|
</div>
|
|
|
|
{{#if img02}}
|
|
<!-- Controls -->
|
|
<a class="left carousel-control" href="#carousel-{{cls}}" 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="#carousel-{{cls}}" role="button" data-slide="next">
|
|
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
|
|
<span class="sr-only">Next</span>
|
|
</a>
|
|
{{/if}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
$('.modal.{{cls}}').on('show.bs.modal', function() {
|
|
$(this).find('img[data-src]').each(function() {
|
|
$(this).attr('src', $(this).data('src'));
|
|
$(this).removeAttr('data-src');
|
|
});
|
|
});
|
|
});
|
|
</script>
|