<f:if condition="{gallery.rows}">
<div id="imageSlider{data.uid}"
class="
ce-gallery
{f:if(condition: data.imageborder, then: ' ce-border')}
imageSlider
"
>
<f:for each="{gallery.rows}" as="row">
<f:for each="{row.columns}" as="column">
<f:if condition="{column.media}">
<div class="slider-item">
<f:render partial="Media/Type" arguments="{file: column.media, dimensions: column.dimensions, data: data, settings: settings}" />
</div>
</f:if>
</f:for>
</f:for>
</div>
<script>
$(document).ready(function(){
$('#imageSlider{data.uid}').bxSlider({
auto: true,
speed: 800,
pause: 5000,
autoControls: true,
stopAutoOnClick: true,
pager: true,
slideWidth: <f:format.raw>{f:if(condition:'{gallery.width}', then: ' {gallery.width}', else: '1200')}</f:format.raw>,
captions: true,
autoHover: true
});
});
</script>
</f:if>