You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
33 lines
1.1 KiB
33 lines
1.1 KiB
--- |
|
id: infinity |
|
title: Infinite Carousel |
|
--- |
|
|
|
Carousel is infinite at default |
|
|
|
import {Carousel} from '@trendyol/react-carousel'; |
|
export const Highlight = ({children, color}) => ( <span style={{ |
|
backgroundColor: color, |
|
borderRadius: '2px', |
|
color: '#fff', |
|
padding: '90px 0', |
|
display: 'block', |
|
height: '200px', |
|
margin: '16px 16px 16px 0', |
|
}}> {children} </span> ); |
|
|
|
<Carousel className={'exampleCarousel1'} show={3.5} slide={2} transition={0.5}> |
|
<Highlight color="#f27a1a">We love Trendyol orange</Highlight> |
|
<a target="_blank" href="https://github.com/trendyol/"><Highlight color="#d53f8c">This is our github</Highlight></a> |
|
<Highlight color="#16be48">We love Trendyol green</Highlight> |
|
<a target="_blank" href="https://trendyol.com/"><Highlight color="#3f51b5">This is our website</Highlight></a> |
|
</Carousel> |
|
|
|
```jsx |
|
<Carousel show={3.5} slide={2} transition={0.5}> |
|
<Highlight color="#f27a1a">We love Trendyol orange</Highlight> |
|
<Highlight color="#d53f8c">This is our github</Highlight> |
|
<Highlight color="#16be48">We love Trendyol green</Highlight> |
|
<Highlight color="#3f51b5">This is our website</Highlight> |
|
</Carousel> |
|
```
|
|
|