Flutter carousel Slider for dynamic videos

Question

I am trying to make application in which a gridview show videos from local storage folder, and clicking on any video open slider and play the video. By swiping left or right, play next or previous video, for this purpose

I am using Carousel Slider package to implement sliding effect for dynamic video data, for playing video i am using Video player package

Code for Slider class is below

class VideoSlider extends StatefulWidget {
 const VideoSlider({
    Key? key,
    required this.listOfVideos, // Contains all videos in folder
    required this.initialIndex, // initial index used in carousel options to show current page
  }) : super(key: key);
  final List<String> listOfVideos;
  final int initialIndex;

  @override
  _VideoSliderState createState() => _VideoSliderState();
}

class _VideoSliderState extends State<VideoSlider> {
  List<VideoPlayerController> controller = []; // list to contain controller for all files in floder
  int i = 0; // used in carousel items to specify controller list index
  @override
  void initState() {
    super.initState();
   // used for loop to add controller for all files in controller list
      for (int j = 0; j < widget.listOfVideos.length; j++) {
        controller.add(
          VideoPlayerController.file(File(widget.listOfVideos[j]))
            ..initialize().then((value) {
              setState(() {});
            }),
        );
      }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
 body: CarouselSlider(
    items: widget.listOfVideos.map((e) {
      return  controller[i].value.isInitialized
                ? AspectRatio(
                    aspectRatio: controller[i].value.aspectRatio,
                    child: VideoPlayer(controller[i]))
                : Container(),}).toList(),
    options: CarouselOptions(
      height: double.infinity,
      viewportFraction: 1,
      initialPage: widget.initialIndex, 
      enlargeCenterPage: true,
      enableInfiniteScroll: false,
    ), ),

// fab to play and pause video
floatingActionButton: FloatingActionButton(
          onPressed: () {
            setState(() {
              _controller.value.isPlaying
                  ? _controller.pause()
                  : _controller.play();
            });
          },
          child: Icon(
            _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
          ),
        ),
    );
  }

From where i am calling VideoSlider

Navigator.push(
        context,
        MaterialPageRoute(builder: (context) {
          return VideoSlider(
            listOfVideos: listOfFiles,
            initialIndex: index,
          );
        }),
      );

Code display slider with exact number, but every slide show first video(video at zero index) not appropriate.Any solution thanks alot.