Sorry for the delayed response here - I must have missed a notification. Stumbled back on it looking for something else! 
So I have inner and outer carousel elements:
OUTER MARKUP:
<div class="container-fluid p-0 m-0">
<div id="{{carouselID}}" class="carousel slide {% if crossFade %}carousel-fade{% endif %}" data-ride="carousel" data-interval="{{slideDuration}}">
<ol class="carousel-indicators" {% if showIndicators == false %}style="display:none;"{% endif %}>
{% set k = itemCount %}{% for i in range(1, k) %}<li {% if i-1 == 0 %}class="active"{% endif %} data-target="#{{carouselID}}" data-slide-to="{{i - 1}}"></li>{% endfor %}
</ol>
<div class="carousel-inner">
{% set k = itemCount %}{% for i in range(1, k) %}
<div data-fred-dropzone="thing{{i}}" class="carousel-item {% if i-1 == 0 %}active{% endif %}" data-fred-min-height="300px" style="min-height:{{heroHeight}}px;height:{{heroHeight}}px;">
</div>
{% endfor %}
</div>
<a class="carousel-control-prev" role="button" href="#{{carouselID}}" data-slide="prev" {% if showControls == false %}style="display:none;"{% endif %}>
<span class="carousel-control-prev-icon" aria-hidden="true"> </span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" role="button" href="#{{carouselID}}" data-slide="next" {% if showControls == false %}style="display:none;"{% endif %}>
<span class="carousel-control-next-icon" aria-hidden="true"> </span>
<span class="sr-only">Next</span>
</a>
</div>
OUTER OPTIONS:
{
"remote": false,
"settings": [
{
"name": "carouselID",
"label": "Page-unique Class Name",
"type": "text",
"value": "mainNewHeroOne"
},
{
"name": "slideDuration",
"label": "Slide Duration (ms)",
"type": "slider",
"min": 0,
"max": 10000,
"step": 100,
"value": 5000
},
{
"name": "itemCount",
"label": "Number of Items",
"type": "slider",
"min": 1,
"max": 5,
"step": 1,
"value": 1
},
{
"name": "heroHeight",
"label": "Height of Hero",
"type": "text",
"value": 300
},
{
"name": "crossFade",
"label": "Crossfade instead of slide",
"type": "toggle",
"value": false
},
{
"name": "showControls",
"label": "Show Controls",
"type": "toggle",
"value": true
},
{
"name": "showIndicators",
"label": "Show Indicators",
"type": "toggle",
"value": true
}
]
}
The outer basically has a slider control for how many carousel items you have plus a variety of other options related to bootstrap carousels
INNER MARKUP:
<div class="m-0 p-0" style="min-height:{{heroHeight}}px;height:{{heroHeight}}px;background:{# FOREGROUND-IMG #}{%if fg_image_picker %}url({{fg_image_picker}}){%if fg_image_repeat %} {{fg_image_repeat}}{%endif%}{%if fg_image_position_val %} {{fg_image_position_val}}{%else%}{%if fg_image_position %} {{fg_image_position}}{%endif%}{%endif%},{%endif%} {# /FOREGROUND-IMG #}linear-gradient({{gradient_angle}}deg, {{gradient_first_colour}} {{gradientoffset}}%, {{gradient_second_colour}}){# BACKGROUND-IMG #}{%if bg_image_picker %}, url({{bg_image_picker}}){%if bg_image_repeat %} {{bg_image_repeat}}{%endif%}{%if bg_image_position_val %} {{bg_image_position_val}}{%else%}{%if bg_image_position %} {{bg_image_position}}{%endif%}{%endif%}{%endif%}{# /BACKGROUND-IMG #};background-size:{%if fg_image_picker %}{%if fg_image_size_val %}{{fg_image_size_val}}{%else%}{%if fg_image_size %}{{fg_image_size}}{%endif%}{%endif%},{%endif%}auto{%if bg_image_picker %}, {%if bg_image_size_val %}{{bg_image_size_val}}{%else%}{%if bg_image_size %}{{bg_image_size}}{%endif%}{%endif%};{%endif%}">
{% if bg_video_picker != "" %}
<video class="herovideo" style="opacity:{%if videoOpacity == "10" %}1.0{% else %}0.{{videoOpacity}}{% endif %};" poster="{{bg_video_poster_image}}" autoplay="autoplay" loop="loop" muted="muted">
<source src="{{bg_video_picker}}" type="video/mp4" />
</video>
{% endif %}
<div class="container" style="position: relative; z-index: 2 !important;height:inherit;" data-fred-name="inner-carousel-content" data-fred-rte="true" data-fred-rte-config="basic">
<div class="d-flex py-3 h-100 align-items-center justify-content-center" style="height:inherit;">
<div class="w-100" style="text-align: center;">
<h6 class="display-3" style="text-align: center; font-family: 'Gotham Black';"><span style="color: #231f20;">A whatever of tech<br />
</span></h6>
<p class="lead mb-0" style="text-align: center;"><span style="color: #231f20; font-family: 'Gotham Black'; letter-spacing: normal;">est. 1997<br />
</span></p>
<a class="mt-4 btn btn-lg btn-ct-yellow">This is a button {{parent.heroHeight}}</a> </div>
</div>
</div>
</div>
INNER OPTIONS:
{
"remote": true,
"settings": [
{
"name": "heroHeight",
"label": "Height of Hero Item (match parent)",
"type": "text",
"value": 300
},
{
"fred-import": "fg_image_group"
},
{
"fred-import": "bg_image_group"
},
{
"fred-import": "bg_gradient_group"
},
{
"fred-import": "bg_video_group"
}
]
}
I have some very detailed background, foreground image and video options working on this in those imported options sets. Let me know if you’d like to see the details on those, but basically you can have video backgrounds with varying opacity, gradients, solid colors, images… pretty much anything and still have a rich text area for content.
Caveat’s - it was tricky having the inner options selectable when they were the same size as the outer container. If you’ve worked with nested containers in Fred you already know what I’m talking about. I was able to make this easier by having an edit-time active css class applied to the inner container that wedged a bottom margin of like 20 or 50 or something like that so that there was space to be able to distinguish between inner and outer.
Let me know if you have any questions on this.
Cheers
