How to display Captions in slider

[anudwigna]

Hello,
I am using this slider. Can you please explain how to display caption text for the slider images.

[serenader2014]

You can take a look at the example file. The slider accept a list of widget, and you can display whatever you want in the widget.

If you don't know how to achieve this, just take a look at this:

new Padding(
  padding: new EdgeInsets.symmetric(vertical: 15.0),
  child: new CarouselSlider(
    items: map<Widget>(imgList, (index, i) {
      return new Container(
        margin: new EdgeInsets.all(5.0),
        child: new ClipRRect(
          borderRadius: new BorderRadius.all(new Radius.circular(5.0)),
          child: new Stack(
            children: <Widget>[
              new CachedNetworkImage(
                imageUrl: i,
                fit: BoxFit.cover,
                width: 1000.0,
                placeholder: placeholder,
              ),
              new Positioned(
                bottom: 0.0,
                left: 0.0,
                right: 0.0,
                child: new Container(
                  decoration: new BoxDecoration(
                    gradient: new LinearGradient(
                      colors: [Color.fromARGB(200, 0, 0, 0), Color.fromARGB(0, 0, 0, 0)],
                      begin: Alignment.bottomCenter,
                      end: Alignment.topCenter,
                    )
                  ),
                  padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
                  child: new Text('No. $index image',
                    style: new TextStyle(
                      color: Colors.white,
                      fontSize: 20.0,
                      fontWeight: FontWeight.bold,
                    ),
                  )
                )
              ),
            ],
          )
        )
      );
    }).toList(),
    autoPlay: false,
    viewportFraction: 0.9,
    aspectRatio: 2.0,
  )
),

[anudwigna]

@serenader2014 Thank you for the reply... What I was trying to achieve was text outside the image below it. Anyways, thanks for the help. I got a lot of idea from the above code.

[serenader2014]

You're welcome. I'm closing this issue if you don't have other question.

[anudwigna]

I solved the above problem. But, is there any way to add the fade effect? And also what about slider pagination

[serenader2014]

What kind of fading effect do you want? Can you post a screenshot or a video? Slider pagination is possible, I'll add this feature in next release.

[JCPradelPH]

@serenader2014 any news on when the fade effect would be supported? This is one of our requirements and we do not want to use another plugin because we already implemented yours on our other pages

[omidraha]

@serenader2014 Thank you for the reply... What I was trying to achieve was text outside the image below it. Anyways, thanks for the help. I got a lot of idea from the above code.

Do you find a solution for how to show a caption over the slider?
I would like to show a caption at the center bottom of slider,
And my half of caption be inside of slider and half of caption be outside of slider.