148 lines
5.2 KiB
Vue
148 lines
5.2 KiB
Vue
|
<script>
|
|||
|
|
import Layout from '../../layouts/main'
|
|||
|
|
import PageHeader from '../../components/page-header'
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Carousel component
|
|||
|
|
*/
|
|||
|
|
export default {
|
|||
|
|
components: { Layout, PageHeader },
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
title: 'Carousel',
|
|||
|
|
items: [
|
|||
|
|
{
|
|||
|
|
text: 'UI Elements',
|
|||
|
|
href: '/',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: 'Carousel',
|
|||
|
|
active: true,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
slide: 0,
|
|||
|
|
slide1: 0,
|
|||
|
|
sliding: null,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<Layout>
|
|||
|
|
<PageHeader :title="title" :items="items" />
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-lg-6">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-body">
|
|||
|
|
<h4 class="card-title">Slides only</h4>
|
|||
|
|
<p class="card-title-desc">
|
|||
|
|
Here’s a carousel with slides only.
|
|||
|
|
Note the presence of the
|
|||
|
|
<code>.d-block</code>
|
|||
|
|
and
|
|||
|
|
<code>.img-fluid</code> on carousel images
|
|||
|
|
to prevent browser default image alignment.
|
|||
|
|
</p>
|
|||
|
|
<b-carousel id="carousel-fade" style="text-shadow: 0px 0px 2px #000">
|
|||
|
|
<b-carousel-slide img-src="/images/small/img-1.jpg"></b-carousel-slide>
|
|||
|
|
<b-carousel-slide img-src="/images/small/img-2.jpg"></b-carousel-slide>
|
|||
|
|
<b-carousel-slide img-src="/images/small/img-3.jpg"></b-carousel-slide>
|
|||
|
|
</b-carousel>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-lg-6">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-body">
|
|||
|
|
<h4 class="card-title">With controls</h4>
|
|||
|
|
<p class="card-title-desc">Adding in the previous and next controls:</p>
|
|||
|
|
<b-carousel style="text-shadow: 0px 0px 2px #000" controls>
|
|||
|
|
<b-carousel-slide img-src="/images/small/img-4.jpg"></b-carousel-slide>
|
|||
|
|
<b-carousel-slide img-src="/images/small/img-5.jpg"></b-carousel-slide>
|
|||
|
|
<b-carousel-slide img-src="/images/small/img-6.jpg"></b-carousel-slide>
|
|||
|
|
</b-carousel>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-lg-6">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-body">
|
|||
|
|
<h4 class="card-title">With indicators</h4>
|
|||
|
|
<p class="card-title-desc">
|
|||
|
|
You can also add the indicators to the
|
|||
|
|
carousel, alongside the controls, too.
|
|||
|
|
</p>
|
|||
|
|
<b-carousel style="text-shadow: 0px 0px 2px #000" controls indicators>
|
|||
|
|
<b-carousel-slide img-src="/images/small/img-3.jpg"></b-carousel-slide>
|
|||
|
|
<b-carousel-slide img-src="/images/small/img-2.jpg"></b-carousel-slide>
|
|||
|
|
<b-carousel-slide img-src="/images/small/img-1.jpg"></b-carousel-slide>
|
|||
|
|
</b-carousel>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-lg-6">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-body">
|
|||
|
|
<h4 class="card-title">With captions</h4>
|
|||
|
|
<p class="card-title-desc">
|
|||
|
|
Add captions to your slides easily with the
|
|||
|
|
<code>.carousel-caption</code> element within any
|
|||
|
|
<code>.carousel-item</code>.
|
|||
|
|
</p>
|
|||
|
|
<b-carousel
|
|||
|
|
id="carousel-1"
|
|||
|
|
v-model="slide"
|
|||
|
|
:interval="4000"
|
|||
|
|
controls
|
|||
|
|
indicators
|
|||
|
|
background="#ababab"
|
|||
|
|
style="text-shadow: 1px 1px 2px #333;"
|
|||
|
|
>
|
|||
|
|
<!-- Text slides with image -->
|
|||
|
|
<b-carousel-slide img-src="/images/small/img-7.jpg">
|
|||
|
|
<div class="text-muted">
|
|||
|
|
<h5>First slide label</h5>
|
|||
|
|
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
|
|||
|
|
</div>
|
|||
|
|
</b-carousel-slide>
|
|||
|
|
|
|||
|
|
<!-- Slides with custom text -->
|
|||
|
|
<b-carousel-slide img-src="/images/small/img-5.jpg">
|
|||
|
|
<h5 class="text-white">Second slide label</h5>
|
|||
|
|
<p class="text-white-50">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
|||
|
|
</b-carousel-slide>
|
|||
|
|
|
|||
|
|
<!-- Slides with image only -->
|
|||
|
|
<b-carousel-slide img-src="/images/small/img-4.jpg">
|
|||
|
|
<h5 class="text-white">Third slide label</h5>
|
|||
|
|
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
|
|||
|
|
</b-carousel-slide>
|
|||
|
|
</b-carousel>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-lg-6">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-body">
|
|||
|
|
<h4 class="card-title">Crossfade</h4>
|
|||
|
|
<p class="card-title-desc">
|
|||
|
|
Add
|
|||
|
|
<code>.carousel-fade</code> to your carousel to animate slides with a fade transition instead of a slide.
|
|||
|
|
</p>
|
|||
|
|
<b-carousel style="text-shadow: 0px 0px 2px #000" controls indicators fade>
|
|||
|
|
<b-carousel-slide img-src="/images/small/img-1.jpg"></b-carousel-slide>
|
|||
|
|
<b-carousel-slide img-src="/images/small/img-2.jpg"></b-carousel-slide>
|
|||
|
|
<b-carousel-slide img-src="/images/small/img-3.jpg"></b-carousel-slide>
|
|||
|
|
</b-carousel>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</Layout>
|
|||
|
|
</template>
|