{{-- @todo needs to be optimised --}}
<!-- BEGIN SLIDER -->
<div class="page-slider margin-bottom-40">
    <div id="carousel-example-generic" class="carousel slide carousel-slider">
        <!-- Indicators -->
        <ol class="carousel-indicators carousel-indicators-frontend">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <!-- First slide -->
            <div class="item carousel-item-eight active">
                <div class="container">
                    <div class="carousel-position-six text-uppercase text-center" style="background: #000; color: #888; opacity: 0.5; font-style: bold;">
                        <h2 class="margin-bottom-20 animate-delay carousel-title-v1"  data-animation="animated fadeInDown">
                            Header <br/>
                            <span class="carousel-title-normal">and Title</span>
                        </h2>
                        <p class="carousel-subtitle-v5 border-top-bottom margin-bottom-30" data-animation="animated fadeInDown">This is what you were looking for</p>
                      <a class="carousel-btn-green" href="#" data-animation="animated fadeInUp">Purchase Now!</a>
                    </div>
                </div>
            </div>

            <!-- Second slide -->
            <div class="item carousel-item-nine">
                <div class="container">
                    <div class="carousel-position-six">
                        <h2 class="animate-delay carousel-title-v6 text-uppercase" data-animation="animated fadeInDown">
                            Header and Title
                        </h2>
                        <p class="carousel-subtitle-v6 text-uppercase" data-animation="animated fadeInDown">
                            This is what you were looking for
                        </p>
                        <p class="carousel-subtitle-v7 margin-bottom-30" data-animation="animated fadeInDown">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
                            Sed est nunc, sagittis at consectetur id.
                        </p>
                        <a class="carousel-btn-green" href="#" data-animation="animated fadeInUp">Purchase Now!</a>
                    </div>
                </div>
            </div>

            <!-- Third slide -->
            <div class="item carousel-item-ten">
                <div class="container">
                    <div class="carousel-position-six">
                        <h2 class="animate-delay carousel-title-v6 text-uppercase" data-animation="animated fadeInDown">
                            Header and Title
                        </h2>
                        <p class="carousel-subtitle-v6 text-uppercase" data-animation="animated fadeInDown">
                            This is what you were looking for
                        </p>
                        <p class="carousel-subtitle-v7 margin-bottom-30" data-animation="animated fadeInDown">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
                            Sed est nunc, sagittis at consectetur id.
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control carousel-control-shop carousel-control-frontend" href="#carousel-example-generic" role="button" data-slide="prev">
            <i class="fa fa-angle-left" aria-hidden="true"></i>
        </a>
        <a class="right carousel-control carousel-control-shop carousel-control-frontend" href="#carousel-example-generic" role="button" data-slide="next">
            <i class="fa fa-angle-right" aria-hidden="true"></i>
        </a>
    </div>
</div>
<!-- END SLIDER -->
@js('/assets/jquery/plugins/owl.carousel/2.0.0/js/owl.carousel.min.js','jq-owl-carousel','jquery')<!-- slider for products -->
@js('/pages/js/bs-carousel.js','bs-carousel','jq-owl-carousel')
@section('scripts')

    <script type="text/javascript">
        jQuery(document).ready(function() {
            Layout.initOWL();
        });
    </script>

    <!-- END PAGE LEVEL JAVASCRIPTS -->
@append