https://github.com/ctx-core/carousel

https://github.com/ctx-core/carousel

Last synced: 30 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/ctx-core/carousel
• Owner: ctx-core
• License: other
• Created: 2019-12-02T17:11:23.000Z (about 5 years ago)
• Default Branch: main
• Last Pushed: 2024-04-12T22:17:01.000Z (9 months ago)
• Last Synced: 2024-04-13T07:44:44.374Z (9 months ago)
• Language: Svelte
• Size: 557 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: Readme.md
  • Changelog: CHANGELOG.md
  • License: License.md

Awesome Lists containing this project

README

        
# @ctx-core/carousel

## Install

`npm i @ctx-core/carousel`

## Usage

```html

	import Carousel from '@ctx-core/carousel'

	


		
Slide 1
	

	

	


		
Slide 2
	

	

	


		
Slide 3
	

	


	.slide {

		background-size: cover;

	}

	.slide-1 {

		background-image: url(https://images.unsplash.com/photo-1517770317945-aa2dd9c9306f);

	}

	.slide-2 {

		background-image: url(https://images.unsplash.com/photo-1556023176-4b9ee95cfe9b);

	}

	.slide-3 {

		background-image: url(https://images.unsplash.com/photo-1555999003-3f2bc447570e);	

	}

```

## Styling

This Carousel is a simple left/right carousel.

The slide styling is left up to you.

You can override:

* `:global(.Carousel .button)`

* `:global(.Carousel .button:hover)`

* `:global(.Carousel .button.prev)`

* `:global(.Carousel .button.next)`

* `:global(.Carousel svg)`