<!-- ### Begin: Element carousel ### -->
<div id="c837" class="frame frame-default frame-type-carousel frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
<div class="frame-container">
<div class="frame-inner">
<header class="frame-header">
<h2 class="element-header">
Carousel Element
</h2>
</header>
<div id="carousel-650" class="carousel carousel-small carousel-fade slide" data-interval="5000" data-wrap="true" data-ride="carousel">
<div class="carousel-inner">
<div class="item active carousel-item carousel-item-type carousel-item-type-textpic" data-itemno="0">
<div class="carousel-backgroundimage-container">
<div id="carousel-backgroundimage-650-159" class="carousel-backgroundimage holderjs" data-background-src="?holder.js/1280x720?auto=yes&text=Image background&theme=sky"></div>
</div>
<div class="carousel-content">
<!-- ### Begin: Element textpic ### -->
<div id="c2" class="frame frame-default frame-type-textpic frame-layout-0 frame-background-none frame-has-backgroundimage frame-space-before-none frame-space-after-none">
<div class="frame-backgroundimage-container">
<div class="frame-backgroundimage" style="background-image: url([object Object])"></div>
</div>
<div class="frame-container">
<div class="frame-inner">
<div class="textpic textpic-left">
<div class="textpic-item textpic-gallery">
<div class="gallery-row">
<div class="gallery-item gallery-item-size-1">
<figure class="image">
<picture>
<img loading="lazy" src="holder.js/640x360?auto=yes&text=Image \n foreground&theme=social" width="640" height="360" intrinsicsize="640x360" title="Image Title" alt="Alt" />
</picture>
</figure>
</div>
</div>
</div>
<div class="textpic-item textpic-text">
<header class="frame-header">
<h2 class="element-header">
Slider 1
</h2>
</header>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</div>
</div>
</div>
</div>
</div>
<!-- ### End: Element textpic ### -->
</div>
</div>
<div class="item carousel-item carousel-item-type carousel-item-type-header" data-itemno="1">
<div class="carousel-backgroundimage-container">
<div id="carousel-backgroundimage-650-550" class="carousel-backgroundimage holderjs" data-background-src="?holder.js/1280x720?auto=yes"></div>
</div>
<div class="carousel-content">
<!-- ### Begin: Element headers ### -->
<div id="c295" class="frame frame-default frame-type-headers frame-layout-0 frame-background-none frame-has-backgroundimage frame-space-before-none frame-space-after-none">
<div class="frame-backgroundimage-container">
<div class="frame-backgroundimage" style="background-image: url([object Object])"></div>
</div>
<div class="frame-container">
<div class="frame-inner">
<header class="frame-header">
<h2 class="element-header">
Slide 2
</h2>
<h3 class="element-subheader">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h3>
</header>
</div>
</div>
</div>
<!-- ### End: Element headers ### -->
</div>
</div>
</div>
<ol class="carousel-indicators">
<li data-target="#carousel-650" data-slide-to="0" class="active">
<span>
Nav Title 1
</span>
</li>
<li data-target="#carousel-650" data-slide-to="1">
<span>
Slide 2
</span>
</li>
</ol>
<a data-slide="prev" role="button" class="left carousel-control carousel-control-prev" href="#carousel-650">
<span class="carousel-control-icon carousel-control-prev-icon"></span>
<span class="sr-only">previous</span>
</a>
<a data-slide="next" role="button" class="right carousel-control carousel-control-next" href="#carousel-650">
<span class="carousel-control-icon carousel-control-next-icon"></span>
<span class="sr-only">next</span>
</a>
</div>
</div>
</div>
</div>
<!-- ### End: Element carousel ### -->
{% extends records ? '@wrapper-frame' : '@wrapper-empty' %}
{% import '@macro-render' as render %}
{% set CType = 'carousel' %}
{% set uid = random(999) %}
{% block main %}
{% include "@atom-header" %}
<div id="carousel-{{ uid }}" class="carousel carousel-{{ size }} carousel-{{ data.pi_flexform.transition }} slide" {% if data.pi_flexform.interval %}data-interval="{{ data.pi_flexform.interval }}"{% endif %}data-wrap="{% if data.pi_flexform.wrap %}true{% else %}false{% endif %}" data-ride="carousel">
<div class="carousel-inner">
{% for item in records %}
{% set itemStyleColor = item.data[0].context.background_color %}
<div class="item{% if loop.first %} active{% endif %} carousel-item carousel-item-type carousel-item-type-{{ item.data[0].type }}" data-itemno="{{ loop.index0 }}"{% if itemStyleColor %} style="background-color: {{ itemStyleColor }}"{% endif %}>
{% include '@partial-background-image' with {
item: item.data[0].context,
dataUid: uid
} %}
{% if item.data[0].type != 'background_image' %}
<div class="carousel-content">
{{ render.frames(item.data) }}
</div>
{% endif %}
</div>
{% endfor %}
</div>
<ol class="carousel-indicators{% if data.pi_flexform.show_nav_title %} carousel-indicators-navigation{% endif %}">
{% for item in records %}
<li data-target="#carousel-{{ uid }}" data-slide-to="{{ loop.index0 }}"
{% if loop.first %}class="active"{% endif %}>
<span>
{% if item.data[0].context.nav_title %}
{{ item.data[0].context.nav_title }}
{% else %}
{{ item.data[0].context.header }}
{% endif %}
</span>
</li>
{% endfor %}
</ol>
{% if records|length > 1 %}
<a data-slide="prev" role="button" class="left carousel-control carousel-control-prev"
href="#carousel-{{ uid }}">
<span class="carousel-control-icon carousel-control-prev-icon"></span>
<span class="sr-only">previous</span>
</a>
<a data-slide="next" role="button" class="right carousel-control carousel-control-next"
href="#carousel-{{ uid }}">
<span class="carousel-control-icon carousel-control-next-icon"></span>
<span class="sr-only">next</span>
</a>
{% endif %}
</div>
{% endblock %}
{
"bodytext": null,
"categories": null,
"CType": null,
"customId": null,
"date": null,
"frame_class": null,
"header": "Carousel Element",
"header_color": null,
"header_layout": 2,
"header_link": null,
"header_position": null,
"header_style": null,
"layout": null,
"space_after_class": null,
"space_before_class": null,
"space_inner_after_class": null,
"space_inner_before_class": null,
"subheader": null,
"target": null,
"size": "small",
"data": {
"pi_flexform": {
"interval": 5000,
"show_nav_title": false,
"transition": "fade",
"wrap": true
}
},
"records": [
{
"data": [
{
"type": "textpic",
"context": {
"nav_title": "Nav Title 1",
"header": "Slider 1",
"bodytext": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et\ndolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.\n",
"image": [
{
"type": "image",
"holder": {
"width": 640,
"height": 360,
"text": "Image \\n foreground",
"theme": "social"
},
"properties": {
"title": "Image Title",
"alternative": "Alt"
}
}
],
"imageorient": "left",
"imagecols": 1,
"background_image": [
{
"holder": {
"text": "Image background",
"width": 1280,
"height": 720,
"theme": "sky"
}
}
],
"data": {
"background_image_options": {
"parallax": false,
"fade": false,
"filter": null
}
}
}
}
]
},
{
"data": [
{
"type": "header",
"context": {
"header": "Slide 2",
"subheader": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr",
"background_image": [
{
"holder": {
"width": 1280,
"height": 720
}
}
],
"data": {
"background_image_options": {
"parallax": false,
"fade": false,
"filter": null
}
}
}
}
]
}
]
}
No notes defined.