98 lines
4.3 KiB
PHP
98 lines
4.3 KiB
PHP
@extends('layouts/contentNavbarLayout')
|
|
|
|
@section('title', 'Carousel - UI elements')
|
|
|
|
@section('content')
|
|
<h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">UI elements /</span> Carousel</h4>
|
|
|
|
<div class="row">
|
|
<!-- Bootstrap carousel -->
|
|
<div class="col-md">
|
|
<h5 class="my-4">Bootstrap carousel</h5>
|
|
|
|
<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
|
|
<ol class="carousel-indicators">
|
|
<li data-bs-target="#carouselExample" data-bs-slide-to="0" class="active"></li>
|
|
<li data-bs-target="#carouselExample" data-bs-slide-to="1"></li>
|
|
<li data-bs-target="#carouselExample" data-bs-slide-to="2"></li>
|
|
</ol>
|
|
<div class="carousel-inner">
|
|
<div class="carousel-item active">
|
|
<img class="d-block w-100" src="{{asset('assets/img/elements/13.jpg')}}" alt="First slide" />
|
|
<div class="carousel-caption d-none d-md-block">
|
|
<h3>First slide</h3>
|
|
<p>Eos mutat malis maluisset et, agam ancillae quo te, in vim congue pertinacia.</p>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img class="d-block w-100" src="{{asset('assets/img/elements/2.jpg')}}" alt="Second slide" />
|
|
<div class="carousel-caption d-none d-md-block">
|
|
<h3>Second slide</h3>
|
|
<p>In numquam omittam sea.</p>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img class="d-block w-100" src="{{asset('assets/img/elements/18.jpg')}}" alt="Third slide" />
|
|
<div class="carousel-caption d-none d-md-block">
|
|
<h3>Third slide</h3>
|
|
<p>Lorem ipsum dolor sit amet, virtute consequat ea qui, minim graeco mel no.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<a class="carousel-control-prev" href="#carouselExample" role="button" data-bs-slide="prev">
|
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Previous</span>
|
|
</a>
|
|
<a class="carousel-control-next" href="#carouselExample" role="button" data-bs-slide="next">
|
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Next</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- Bootstrap crossfade carousel -->
|
|
<div class="col-md">
|
|
<h5 class="my-4">Bootstrap crossfade carousel (dark)</h5>
|
|
|
|
<div id="carouselExample-cf" class="carousel carousel-dark slide carousel-fade" data-bs-ride="carousel">
|
|
<ol class="carousel-indicators">
|
|
<li data-bs-target="#carouselExample-cf" data-bs-slide-to="0" class="active"></li>
|
|
<li data-bs-target="#carouselExample-cf" data-bs-slide-to="1"></li>
|
|
<li data-bs-target="#carouselExample-cf" data-bs-slide-to="2"></li>
|
|
</ol>
|
|
<div class="carousel-inner">
|
|
<div class="carousel-item active">
|
|
<img class="d-block w-100" src="{{asset('assets/img/elements/18.jpg')}}" alt="First slide" />
|
|
<div class="carousel-caption d-none d-md-block">
|
|
<h3>First slide</h3>
|
|
<p>Eos mutat malis maluisset et, agam ancillae quo te, in vim congue pertinacia.</p>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img class="d-block w-100" src="{{asset('assets/img/elements/13.jpg')}}" alt="Second slide" />
|
|
<div class="carousel-caption d-none d-md-block">
|
|
<h3>Second slide</h3>
|
|
<p>In numquam omittam sea.</p>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img class="d-block w-100" src="{{asset('assets/img/elements/2.jpg')}}" alt="Third slide" />
|
|
<div class="carousel-caption d-none d-md-block">
|
|
<h3>Third slide</h3>
|
|
<p>Lorem ipsum dolor sit amet, virtute consequat ea qui, minim graeco mel no.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<a class="carousel-control-prev" href="#carouselExample-cf" role="button" data-bs-slide="prev">
|
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Previous</span>
|
|
</a>
|
|
<a class="carousel-control-next" href="#carouselExample-cf" role="button" data-bs-slide="next">
|
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Next</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@endsection
|