@local <!-- views/pages/slick.blade.php --> @endlocal
<x-app-layout>
    <x-slot name="css">
        <link rel="stylesheet" href="{{ asset('js/plugins/slick-carousel/slick.css') }}">
        <link rel="stylesheet" href="{{ asset('js/plugins/slick-carousel/slick-theme.css') }}">
    </x-slot>
    <x-slot name="js">
        <!-- jQuery (required for Slick Slider plugin) -->
        <script src="{{ asset('js/lib/jquery.min.js') }}"></script>
        <script>window.AppLocale = "{{ App::getLocale() }}";</script>
        <!-- Page JS Plugins -->
        <script src="{{ asset('js/plugins/slick-carousel/slick.min.js') }}"></script>

        <!-- Page JS Code -->
        <script type="module">
            // Slick Slider, for more info and examples you can check out http://kenwheeler.github.io/slick/
            DashApp.helpersOnLoad(['jq-slick']);
        </script>
    </x-slot>
    <!-- Hero -->
    <x-page.hero-section pageTitle="Slick Slider Example" breadcrumbItem="Examples" breadcrumbActive="Plugin"/>
    <!-- END Hero -->

    <!-- Page Content -->
    <x-page.content-section>
        <div class="row">
            <div class="col-md-6">
                <!-- Info -->
                <x-page.block blockTitle="Plugin Example" outerClasses="block-rounded" headerClasses="block-header-default">
                    <p>{{ __("This page showcases how easily you can add a plugin’s JS/CSS assets and init it using a DashApp JS helper.") }}</p>
                </x-page.block>
                <!-- END Info -->
            </div>
            <div class="col-md-6">
                <!-- Slider with dots -->
                <x-page.block blockTitle="Dots" outerClasses="block-rounded" headerClasses="block-header-default">
                    <x-page.slider>
                        <div>
                            <img class="img-fluid" src="{{ asset('media/photos/photo2.jpg') }}" alt="photo">
                        </div>
                        <div>
                            <img class="img-fluid" src="{{ asset('media/photos/photo3.jpg') }}" alt="photo">
                        </div>
                        <div>
                            <img class="img-fluid" src="{{ asset('media/photos/photo4.jpg') }}" alt="photo">
                        </div>
                    </x-page.slider>
                </x-page.block>
                <!-- END Slider with dots -->
            </div>
        </div>
    </x-page.content-section>
    <!-- END Page Content -->
</x-app-layout>