Lutfahimayatus
/
MIF_E31212289
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
MIF_E31212289/resources/views/pages/bootstrap-carousel.blade.php

236 lines
13 KiB
PHP
Raw Permalink Blame History

@extends('layouts.app')
@section('title', 'Carousel')
@push('style')
<!-- CSS Libraries -->
@endpush
@section('main')
<div class="main-content">
<section class="section">
<div class="section-header">
<h1>Carousel</h1>
<div class="section-header-breadcrumb">
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
<div class="breadcrumb-item"><a href="#">Bootstrap Components</a></div>
<div class="breadcrumb-item">Carousel</div>
</div>
</div>
<div class="section-body">
<h2 class="section-title">Carousel</h2>
<p class="section-lead">
A slideshow component for cycling through elements—images or slides of text—like a carousel.
</p>
<div class="row">
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>Simple</h4>
</div>
<div class="card-body">
<div id="carouselExampleIndicators"
class="carousel slide"
data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100"
src="{{ asset('img/news/img01.jpg') }}"
alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100"
src="{{ asset('img/news/img07.jpg') }}"
alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100"
src="{{ asset('img/news/img08.jpg') }}"
alt="Third slide">
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Navigation &amp; Indicator</h4>
</div>
<div class="card-body">
<div id="carouselExampleIndicators3"
class="carousel slide"
data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators3"
data-slide-to="0"
class="active"></li>
<li data-target="#carouselExampleIndicators3"
data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators3"
data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100"
src="{{ asset('img/news/img01.jpg') }}"
alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100"
src="{{ asset('img/news/img07.jpg') }}"
alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100"
src="{{ asset('img/news/img08.jpg') }}"
alt="Third slide">
</div>
</div>
<a class="carousel-control-prev"
href="#carouselExampleIndicators3"
role="button"
data-slide="prev">
<span class="carousel-control-prev-icon"
aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next"
href="#carouselExampleIndicators3"
role="button"
data-slide="next">
<span class="carousel-control-next-icon"
aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>Caption</h4>
</div>
<div class="card-body">
<div id="carouselExampleIndicators2"
class="carousel slide"
data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators2"
data-slide-to="0"
class="active"></li>
<li data-target="#carouselExampleIndicators2"
data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators2"
data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100"
src="{{ asset('img/news/img01.jpg') }}"
alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>Heading</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100"
src="{{ asset('img/news/img07.jpg') }}"
alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5>Heading</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100"
src="{{ asset('img/news/img08.jpg') }}"
alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>Heading</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<a class="carousel-control-prev"
href="#carouselExampleIndicators2"
role="button"
data-slide="prev">
<span class="carousel-control-prev-icon"
aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next"
href="#carouselExampleIndicators2"
role="button"
data-slide="next">
<span class="carousel-control-next-icon"
aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Crossfade</h4>
</div>
<div class="card-body">
<div id="carouselExampleFade"
class="carousel slide carousel-fade"
data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100"
src="{{ asset('img/news/img01.jpg') }}"
alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100"
src="{{ asset('img/news/img07.jpg') }}"
alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100"
src="{{ asset('img/news/img08.jpg') }}"
alt="Third slide">
</div>
</div>
<a class="carousel-control-prev"
href="#carouselExampleFade"
role="button"
data-slide="prev">
<span class="carousel-control-prev-icon"
aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next"
href="#carouselExampleFade"
role="button"
data-slide="next">
<span class="carousel-control-next-icon"
aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
@endsection
@push('scripts')
<!-- JS Libraies -->
<!-- Page Specific JS File -->
@endpush
Reference in New Issue View Git Blame Copy Permalink