<section class="top-bar">
    <div class="top-bar-wrap">

        <div class="header-logo">
            <a href="/">{{ HTML::image('img/logo.jpg', $alt="Vandeurzen Tuinontwerp", $attributes = array()) }}</a>
        </div>

        <div class="navigation">
            <ul class="menu">
                @foreach($menuItems as $item)
                    <li @if($data->content->code_name == $item->code_name) class="active" @endif>
                        <a href="/@if($item->route!='/'){{$item->route}}@endif">{{$item->name}}</a>
                        <span></span>
                    </li>
                @endforeach
            </ul>
        </div>
    </div>
</section>

<div class="header-image">
    <div class="for-header">
        <div class="swiper-wrapper">

            <div class="swiper-slide">
                <header class="streamer-bg-image header-1">
                    @yield('streamer')
                </header>
            </div>

            <div class="swiper-slide">
                <header class="streamer-bg-image header-2">
                    @yield('streamer')
                </header>
            </div>

            <div class="swiper-slide">
                <header class="streamer-bg-image header-3">
                    @yield('streamer')
                </header>
            </div>

            <div class="swiper-slide">
                <header class="streamer-bg-image header-4">
                    @yield('streamer')
                </header>
            </div>

            <div class="swiper-slide">
                <header class="streamer-bg-image header-5">
                    @yield('streamer')
                </header>
            </div>

            <div class="swiper-slide">
                <header class="streamer-bg-image header-6">
                    @yield('streamer')
                </header>
            </div>

        </div>
    </div>
</div>

@section('js')
    <script>
        var swiperHeader = new Swiper('.for-header', {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            spaceBetween: 30,
            centeredSlides: true,
            autoplay: 3000,
            autoplayDisableOnInteraction: false,
            effect: 'fade',
            speed: 1250,
        });
    </script>
@endsection