Skip to content
Permalink
Browse files

web content carousel example

  • Loading branch information...
neilking committed Apr 10, 2017
1 parent 1c9f413 commit a90f1e4926ab87563ec020ff8268bda3daae0640
@@ -0,0 +1,3 @@
This is the source code of the [Liferay DXP Toturial: Carousel Template](https://web.liferay.com/web/zhao.jin/blog/-/blogs/liferay-dxp-tutorial-carousel-template)

![alt text](https://web.liferay.com/documents/7991965/73542363/crodisplay.png/fba45370-8e51-43bc-bbc3-6d180b0c380f?t=1491788135341 "Preview")
@@ -0,0 +1,55 @@
{
"availableLanguageIds": [
"en_US"
],
"defaultLanguageId": "en_US",
"fields": [
{
"label": {
"en_US": "Aspect Ratio"
},
"predefinedValue": {
"en_US": ""
},
"style": {
"en_US": ""
},
"tip": {
"en_US": ""
},
"dataType": "string",
"indexType": "",
"localizable": true,
"name": "aspectRatio",
"readOnly": false,
"repeatable": false,
"required": false,
"showLabel": true,
"type": "text"
},
{
"label": {
"en_US": "Image"
},
"predefinedValue": {
"en_US": ""
},
"style": {
"en_US": ""
},
"tip": {
"en_US": ""
},
"dataType": "image",
"fieldNamespace": "ddm",
"indexType": "keyword",
"localizable": true,
"name": "image",
"readOnly": false,
"repeatable": true,
"required": false,
"showLabel": true,
"type": "ddm-image"
}
]
}
@@ -0,0 +1,47 @@
<style>
#carousel-<@portlet.namespace /> .aspect-ratio-custom {
padding-bottom: ${aspectRatio.getData()};
}
@media (max-width: 799px) {
#carousel-<@portlet.namespace /> .aspect-ratio-custom {
padding-bottom: 67%;
}
}
</style>


<#if image.getSiblings()?has_content>
<section class="carousel-container">
<div class="carousel slide" data-ride="carousel" id='carousel-<@portlet.namespace />'>
<ol class="carousel-indicators hidden-sm hidden-xs">
<#list image.getSiblings() as cur_img>
<li class="${(cur_img?counter == 1)?then('active', '')}" data-slide-to="${(cur_img?counter == 1)?then(0, (cur_img?counter - 1))}" data-target='carousel-<@portlet.namespace />'></li>
</#list>
</ol>

<div class="carousel-inner" role="listbox">
<#list image.getSiblings() as cur_innerImage>
<div class="${(cur_innerImage?counter == 1)?then('active', '')} item">
<div class="aspect-ratio aspect-ratio-custom aspect-ratio-middle">
<img alt="${cur_innerImage.getAttribute("alt")}" src="${cur_innerImage.getData()}">
</div>
</div>
</#list>
</div>

<a class="left carousel-control" href='#carousel-<@portlet.namespace />' 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-<@portlet.namespace />' role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

<span class="sr-only">Next</span>
</a>
</div>
</section>
</#if>

0 comments on commit a90f1e4

Please sign in to comment.
You can’t perform that action at this time.