85 lines
2.7 KiB
PHP
85 lines
2.7 KiB
PHP
@extends('layouts.backend')
|
||
|
||
@section('css')
|
||
<link rel="stylesheet" href="{{ asset('js/plugins/slick-carousel/slick.css') }}">
|
||
<link rel="stylesheet" href="{{ asset('js/plugins/slick-carousel/slick-theme.css') }}">
|
||
@endsection
|
||
|
||
@section('js')
|
||
<!-- jQuery (required for Slick Slider plugin) -->
|
||
<script src="{{ asset('js/lib/jquery.min.js') }}"></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/
|
||
Dashmix.helpersOnLoad(['jq-slick']);
|
||
</script>
|
||
@endsection
|
||
|
||
@section('content')
|
||
<!-- Hero -->
|
||
<div class="bg-body-light">
|
||
<div class="content content-full">
|
||
<div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center">
|
||
<h1 class="flex-grow-1 fs-3 fw-semibold my-2 my-sm-3">Slick Slider Example</h1>
|
||
<nav class="flex-shrink-0 my-2 my-sm-0 ms-sm-3" aria-label="breadcrumb">
|
||
<ol class="breadcrumb">
|
||
<li class="breadcrumb-item">Examples</li>
|
||
<li class="breadcrumb-item active" aria-current="page">Plugin</li>
|
||
</ol>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- END Hero -->
|
||
|
||
<!-- Page Content -->
|
||
<div class="content">
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<!-- Info -->
|
||
<div class="block block-rounded">
|
||
<div class="block-header block-header-default">
|
||
<h3 class="block-title">
|
||
Plugin Example
|
||
</h3>
|
||
</div>
|
||
<div class="block-content">
|
||
<p>
|
||
This page showcases how easily you can add a plugin’s JS/CSS assets and init it using a Dashmix JS helper.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<!-- END Info -->
|
||
</div>
|
||
<div class="col-md-6">
|
||
<!-- Slider with dots -->
|
||
<div class="block block-rounded">
|
||
<div class="block-header block-header-default">
|
||
<h3 class="block-title">
|
||
Dots
|
||
</h3>
|
||
</div>
|
||
<div class="js-slider" data-dots="true">
|
||
<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>
|
||
</div>
|
||
<!-- END Slider with dots -->
|
||
</div>
|
||
<!-- END Dots -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- END Page Content -->
|
||
@endsection
|