@teenageinterface/carousel v0.1.3

Carousel Component

The Carousel component allows you to create a sliding carousel with configurable options such as auto-sliding, controls, and dot indicators.

Installation

Ensure that you have installed the @teenageinterface/carousel library in your Angular project. If not, you can add it using:

npm install @teenageinterface/carousel

Usage

Import the Carousel component module into your Angular application:

import { CarouselComponent, SlideComponent } from '@teenageinterface/carousel';

@Component({
  selector: 'pages-carousel',
  template: `
    <tiCarousel [autoSlide]="true" [autoSlideTime]="3000">
      <tiSlide>Slide 1 Content</tiSlide>
      <tiSlide>Slide 2 Content</tiSlide>
      <tiSlide>Slide 3 Content</tiSlide>
    </tiCarousel>
  `,
})
export default class CarouselPage {}

Example

<tiCarousel [autoSlide]="true" [autoSlideTime]="3000">
  <tiSlide>Slide 1 Content</tiSlide>
  <tiSlide>Slide 2 Content</tiSlide>
  <tiSlide>Slide 3 Content</tiSlide>
</tiCarousel>

Properties

Methods

• nextSlide(): Moves to the next slide.
• prevSlide(): Moves to the previous slide.
• goToSlide(index: number): Goes to a specific slide by index.
• pauseAutoSlide(): Pauses the auto-slide feature.
• resumeAutoSlide(): Resumes the auto-slide feature.

Events

• onDragStart(event: MouseEvent): Triggered when the drag starts.
• onDrag(event: MouseEvent): Triggered during the drag event.
• onDragEnd(event: MouseEvent): Triggered when the drag ends.

Documentation

For more information, visit the official documentation.

License

This project is licensed under the MIT License.