{{-- carousel --}}
<header class="container-fluid text-center">
    <h1 class="sr-only">{{ $masterName }}</h1>
    <div id="theCarousel" class="carousel slide carousel-fade" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators hidden-xs">
            @foreach($carousel as $key=>$val)
                <li data-target="#theCarousel" data-slide-to="{{ $key }}" class="{{ ($key == 0)?'active':'' }}"></li>
            @endforeach
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
        @foreach($carousel as $key=>$val)
            <div class="item{{ ($key == 0)?' active':'' }}">
                <h2 class="carousel-text" data-animate="true" data-effect="slideInRight">
                    {{ $val->media_title or '' }}
                </h2>
                <img class="img img-responsive" alt="{{ $val->media_content or '' }}" src="{{ $val->media_url ? asset($storage_url.'img/home/'.$val->media_url) : '' }}" />
            </div>
        @endforeach

        </div>
        <div class="slideDown hidden-xs">
            <button id="slideDown" class="btn">
                <i class="fa fa-chevron-down" aria-hidden="true"></i>
            </button>
        </div>
    </div>
</header>
{{-- /. carousel --}}