flutter_carousel_slider

To programmatically control the carousel (e.g., via buttons), create an instance of CarouselSliderController and pass it to the carouselController property of the CarouselSlider widget.

class CarouselDemo extends StatelessWidget {
  CarouselSliderController buttonCarouselController = CarouselSliderController();

 @override
  Widget build(BuildContext context) => Column(
    children: <Widget>[
      CarouselSlider(
        items: child,
        carouselController: buttonCarouselController,
        options: CarouselOptions(
          autoPlay: false,
          enlargeCenterPage: true,
          viewportFraction: 0.9,
          aspectRatio: 2.0,
          initialPage: 2,
        ),
      ),
      RaisedButton(
        onPressed: () => buttonCarouselController.nextPage(
            duration: Duration(milliseconds: 300), curve: Curves.linear),
        child: Text('→'),
      )
    ]
  );
}

Use the CarouselOptions class to customize the appearance, scrolling behavior, and auto-play settings of a CarouselSlider.

Key configuration categories include:

Dimensions and Layout

• height: Sets a fixed height for the carousel (overrides aspectRatio).
• aspectRatio: The ratio used if no height is provided (defaults to 16/9).
• viewportFraction: The fraction of the viewport each page occupies (defaults to 0.8).
• padEnds: If true, adds padding to the start and end of the list so the first/last items are centered (only effective if viewportFraction < 1.0).
• scrollDirection: The axis of scrolling (Axis.horizontal or Axis.vertical).

Auto-play Settings

• autoPlay: Enables or disables automatic sliding.
• autoPlayInterval: Frequency of slides (defaults to 4 seconds).
• autoPlayAnimationDuration: Duration of the transition animation (defaults to 800 ms).
• autoPlayCurve: The animation curve (defaults to Curves.fastOutSlowIn).
• pauseAutoPlayOnTouch: If true, auto-play pauses while the user is interacting with the carousel.
• pauseAutoPlayOnManualNavigate: If true, auto-play pauses when using a CarouselSliderController to navigate.
• pauseAutoPlayInFiniteScroll: If enableInfiniteScroll is false, determines if auto-play should pause at the last item (true) or loop back to the first (false).

Visual Effects and Page Centering

• enlargeCenterPage: If true, the current center page is larger than side images.
• enlargeStrategy: Determines how the center page is enlarged (CenterPageEnlargeStrategy.scale, .height, or .zoom).
• enlargeFactor: How much side pages are scaled down (defaults to 0.3).
• disableCenter: If true, disables the Center widget for each slide.

Scrolling and Interaction

• enableInfiniteScroll: Whether the carousel loops infinitely.
• animateToClosest: Whether to animate to the closest page occurrence.
• pageSnapping: Enables or disables page snapping (defaults to true).
• scrollPhysics: Custom ScrollPhysics for the carousel.

Callbacks

• onPageChanged: Triggered when the center page changes. Provides the index and a CarouselPageChangedReason (timed, manual, or controller).
• onScrolled: Triggered whenever the carousel is scrolled, providing the scroll offset.

Use CarouselOptions to control the carousel's behavior.

Important: If you provide a height parameter, the aspectRatio parameter will be ignored.

Available configuration properties include:

• height: Fixed height of the carousel.
• aspectRatio: Aspect ratio of the carousel (ignored if height is set).
• viewportFraction: Fraction of the viewport to display (e.g., 0.8).
• initialPage: The starting page index.
• enableInfiniteScroll: Whether the carousel loops infinitely.
• reverse: Whether the carousel scrolls in reverse.
• autoPlay: Whether the carousel automatically scrolls.
• autoPlayInterval: Duration between auto-play transitions.
• autoPlayAnimationDuration: Duration of the auto-play animation.
• autoPlayCurve: The curve used for auto-play animations.
• enlargeCenterPage: Whether to enlarge the center item.
• enlargeFactor: The factor by which the center item is enlarged.
• onPageChanged: Callback function triggered when the page changes.
• scrollDirection: The axis of scrolling (Axis.horizontal or Axis.vertical).

CarouselSlider(
   items: items,
   options: CarouselOptions(
      height: 400,
      aspectRatio: 16/9,
      viewportFraction: 0.8,
      initialPage: 0,
      enableInfiniteScroll: true,
      reverse: false,
      autoPlay: true,
      autoPlayInterval: Duration(seconds: 3),
      autoPlayAnimationDuration: Duration(milliseconds: 800),
      autoPlayCurve: Curves.fastOutSlowIn,
      enlargeCenterPage: true,
      enlargeFactor: 0.3,
      onPageChanged: callbackFunction,
      scrollDirection: Axis.horizontal,
   )
 )