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

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

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/ctx-core/carousel
• Owner: ctx-core
• License: other
• Created: 2019-12-02T17:11:23.000Z (almost 6 years ago)
• Default Branch: main
• Last Pushed: 2024-09-01T17:06:58.000Z (about 1 year ago)
• Last Synced: 2025-08-08T15:03:53.980Z (3 months ago)
• Language: Svelte
• Size: 737 KB
• Stars: 0
• Watchers: 1
• 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)`