Giter Club home page Giter Club logo

Comments (7)

serenader2014 avatar serenader2014 commented on May 24, 2024 1

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,
  )
),

from flutter_carousel_slider.

serenader2014 avatar serenader2014 commented on May 24, 2024 1

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.

from flutter_carousel_slider.

JCPradelPH avatar JCPradelPH commented on May 24, 2024 1

@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

from flutter_carousel_slider.

anudwigna avatar anudwigna commented on May 24, 2024

@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.

from flutter_carousel_slider.

serenader2014 avatar serenader2014 commented on May 24, 2024

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

from flutter_carousel_slider.

anudwigna avatar anudwigna commented on May 24, 2024

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

from flutter_carousel_slider.

omidraha avatar omidraha commented on May 24, 2024

@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.

from flutter_carousel_slider.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.