142 lines
6.8 KiB
JavaScript
142 lines
6.8 KiB
JavaScript
import React, { useState } from 'react'
|
|
import {
|
|
CCard,
|
|
CCardBody,
|
|
CCardHeader,
|
|
CCarousel,
|
|
CCarouselCaption,
|
|
CCarouselControl,
|
|
CCarouselIndicators,
|
|
CCarouselInner,
|
|
CCarouselItem,
|
|
CCol,
|
|
CRow
|
|
} from '@coreui/react-ts'
|
|
import { DocsLink } from 'src/reusable'
|
|
|
|
const slides = [
|
|
'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1607923e7e2%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1607923e7e2%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.9296875%22%20y%3D%22217.75625%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
|
|
'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa20%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa20%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
|
|
'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa21%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa21%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
|
|
]
|
|
|
|
const Carousels = () => {
|
|
const [activeIndex] = useState(1)
|
|
|
|
return (
|
|
<CRow>
|
|
<CCol xs="12" xl="6">
|
|
<CCard className="mb-4">
|
|
<CCardHeader>
|
|
Carousel with controls
|
|
<DocsLink name="CCarousel"/>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<CCarousel>
|
|
<CCarouselInner>
|
|
<CCarouselItem>
|
|
<img className="d-block w-100" src={slides[0]} alt="slide 1"/>
|
|
</CCarouselItem>
|
|
<CCarouselItem>
|
|
<img className="d-block w-100" src={slides[1]} alt="slide 2"/>
|
|
</CCarouselItem>
|
|
<CCarouselItem>
|
|
<img className="d-block w-100" src={slides[2]} alt="slide 3"/>
|
|
</CCarouselItem>
|
|
</CCarouselInner>
|
|
<CCarouselControl direction="prev"/>
|
|
<CCarouselControl direction="next"/>
|
|
</CCarousel>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
<CCol xs="12" xl="6">
|
|
<CCard className="mb-4">
|
|
<CCardHeader>
|
|
Carousel with controls, indicators and caption
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<CCarousel activeIndex={activeIndex}>
|
|
<CCarouselIndicators/>
|
|
<CCarouselInner>
|
|
<CCarouselItem>
|
|
<img className="d-block w-100" src={slides[0]} alt="slide 1"/>
|
|
<CCarouselCaption><h3>Slide 1</h3><p>Slide 1</p></CCarouselCaption>
|
|
</CCarouselItem>
|
|
<CCarouselItem>
|
|
<img className="d-block w-100" src={slides[1]} alt="slide 2"/>
|
|
<CCarouselCaption><h3>Slide 2</h3><p>Slide 2</p></CCarouselCaption>
|
|
</CCarouselItem>
|
|
<CCarouselItem>
|
|
<img className="d-block w-100" src={slides[2]} alt="slide 3"/>
|
|
<CCarouselCaption><h3>Slide 3</h3><p>Slide 3</p></CCarouselCaption>
|
|
</CCarouselItem>
|
|
</CCarouselInner>
|
|
<CCarouselControl direction="prev"/>
|
|
<CCarouselControl direction="next"/>
|
|
</CCarousel>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
<CCol xs="12" xl="6">
|
|
<CCard className="mb-4">
|
|
<CCardHeader>
|
|
Carousel animation
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<CCarousel animate>
|
|
<CCarouselIndicators/>
|
|
<CCarouselInner>
|
|
<CCarouselItem>
|
|
<img className="d-block w-100" src={slides[0]} alt="slide 1"/>
|
|
<CCarouselCaption><h3>Slide 1</h3><p>Slide 1</p></CCarouselCaption>
|
|
</CCarouselItem>
|
|
<CCarouselItem>
|
|
<img className="d-block w-100" src={slides[1]} alt="slide 2"/>
|
|
<CCarouselCaption><h3>Slide 2</h3><p>Slide 2</p></CCarouselCaption>
|
|
</CCarouselItem>
|
|
<CCarouselItem>
|
|
<img className="d-block w-100" src={slides[2]} alt="slide 3"/>
|
|
<CCarouselCaption><h3>Slide 3</h3><p>Slide 3</p></CCarouselCaption>
|
|
</CCarouselItem>
|
|
</CCarouselInner>
|
|
<CCarouselControl direction="prev"/>
|
|
<CCarouselControl direction="next"/>
|
|
</CCarousel>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
<CCol xs="12" xl="6">
|
|
<CCard className="mb-4">
|
|
<CCardHeader>
|
|
Carousel animation with autoSlide
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<CCarousel animate autoSlide={3000}>
|
|
<CCarouselIndicators/>
|
|
<CCarouselInner>
|
|
<CCarouselItem>
|
|
<img className="d-block w-100" src={slides[0]} alt="slide 1"/>
|
|
<CCarouselCaption><h3>Slide 1</h3><p>Slide 1</p></CCarouselCaption>
|
|
</CCarouselItem>
|
|
<CCarouselItem>
|
|
<img className="d-block w-100" src={slides[1]} alt="slide 2"/>
|
|
<CCarouselCaption><h3>Slide 2</h3><p>Slide 2</p></CCarouselCaption>
|
|
</CCarouselItem>
|
|
<CCarouselItem>
|
|
<img className="d-block w-100" src={slides[2]} alt="slide 3"/>
|
|
<CCarouselCaption><h3>Slide 3</h3><p>Slide 3</p></CCarouselCaption>
|
|
</CCarouselItem>
|
|
</CCarouselInner>
|
|
<CCarouselControl direction="prev"/>
|
|
<CCarouselControl direction="next"/>
|
|
</CCarousel>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
</CRow>
|
|
)
|
|
}
|
|
|
|
export default Carousels
|