This is a simple slider package, you can put the position of the indicator and text on it and personalize it.
Features
✔️ Ability to zoom with double tab. ✔️ The possibility of choosing several effects for the indicator. ✔️ Display text for title and body and specify its position. ✔️ Select the position of the slider indicator. ✔️ Download images in blur.
CarouselCustomSlider(
autoPlay: true,
isVerticalIndicator: false,
dragStartBehavior: DragStartBehavior.down,
scrollDirection: Axis.vertical,
alignmentPositionIndicator: Alignment.bottomCenter,
viewportFraction: 1,
viewportFractionPadingvertical: 0,
sliderList: sliderListImage,
effect: SwapEffect(
dotHeight: 12.0,
dotWidth: 12.0,
paintStyle: PaintingStyle.fill,
type: SwapType.yRotation,
activeDotColor: Theme.of(context).primaryColor,
dotColor: Theme.of(context).colorScheme.inversePrimary,
childrenStackBuilder: (index) {
return Text(
sliderTitlePost[index],
style: const TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.white),
);
}
),
),
- new
CarouselCustomSlider.advancedCarouselSlider(
slides: listSlide,
height: 90,
viewportFraction: 0.8,
childrenStackBuilder: (int index) {
return Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
slides[index]['title']!,
style: const TextStyle(
fontSize: 24,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
Text(
slides[index]['subtitle']!,
style: const TextStyle(
fontSize: 18,
color: Colors.white,
),
),
Text(
slides[index]['description']!,
style: const TextStyle(
fontSize: 14,
color: Colors.white,
),
),
],
);
},
),
List<Map<String, String>> slides = [
{
"image":
"https://devloop01.github.io/voyage-slider/images/scotland-mountains.jpg",
"title": "Highlands",
"subtitle": "Scotland",
"description": "The mountains are calling"
},
{
"image": "https://devloop01.github.io/voyage-slider/images/machu-pichu.jpg",
"title": "Machu Pichu",
"subtitle": "Peru",
"description": "Adventure is never far away"
},
{
"image": "https://devloop01.github.io/voyage-slider/images/chamonix.jpg",
"title": "Chamonix",
"subtitle": "France",
"description": "Let your dreams come true"
},
];
- New
Reflection baner you can use web, windows, mac, linux.
CarouselCustomSlider.reflection(
sliderList: listImage,
showReflection: true,
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 0.3,
fit: BoxFit.fill,
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const CardPage(),
),
);
},
children: [
IgnorePointer(
child: Padding(
padding: EdgeInsets.only(
left: 25.0,
right: 70.0,
top: MediaQuery.of(context).size.height * 0.15,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
childrenStackBuilder(int index){
Icon(
Icons.arrow_forward,
color: Theme.of(context).primaryColor,
size: 50,
),
const SizedBox(width: 10),
Text(
"View All",
style: TextStyle(
color: Theme.of(context).primaryColor,
fontSize: 35,
fontWeight: FontWeight.bold,
),
)
},
),
),
)
],
),
CarouselCustomSlider.autoScrollingWheel(
autoPlay: false,
height: 150,
backgroundImageUrls: listImage,
children: children,
),
CarouselCustomSlider.parallax(
imageUrl: sliderListImage,
// height: 400,
showBackgroundImage: true,
borderRadius: BorderRadius.circular(16.0),
border: Border.all(color: Colors.white, width: 5.0),
customCurve: Curves.easeInOutBack,
shadowColor: Colors.pink,
horizontalTransform: 250,
///You may sometimes get container box error, you need to change [viewportFraction] , [valueScalingFactor] , [horizontalTransform] , [dynamicHeight] value to match with one another,
/// most of the time the problem is solved by changing these two [viewportFraction] , [valueScalingFactor] .
valueScalingFactor: 0.4,
viewportFraction: 0.8,
dynamicHeight: 600,
childrenStackBuilder(int index) {
const Positioned(
left: 25,
bottom: 25.0,
child: Text(
'Parallax$index',
style: TextStyle(color: Colors.white, fontSize: 30.0),
),
),
},
),
CarouselCustomSlider.transformed3DCardlider(
imageUrl: sliderListImage,
transformType3d: TransformType3d.identity,
showBackgroundImage: false,
),
CarouselCustomSlider.transformed3DCardlider(
imageUrl: sliderListImage,
transformType3d: TransformType3d.identity1,
showBackgroundImage: false,
),
CarouselCustomSlider.transformed3DCardlider(
imageUrl: sliderListImage,
transformType3d: TransformType3d.inverted,
showBackgroundImage: false,
),
CarouselCustomSlider.transformed3DCardlider(
imageUrl: sliderListImage,
transformType3d: TransformType3d.inverted1,
showBackgroundImage: false,
),
CarouselCustomSlider.transformed3DCardlider(
imageUrl: sliderListImage,
transformType3d: TransformType3d.inverted2,
showBackgroundImage: false,
),
CarouselCustomSlider.transformed3DCardlider(
imageUrl: sliderListImage,
transformType3d: TransformType3d.inverted3,
showBackgroundImage: false,
),
CarouselCustomSlider.transformed3DCardlider(
imageUrl: sliderListImage,
transformType3d: TransformType3d.inverted4,
showBackgroundImage: false,
),
CarouselCustomSlider.transformed3DCardlider(
imageUrl: sliderListImage,
transformType3d: TransformType3d.rotationY,
showBackgroundImage: false,
),
CarouselCustomSlider.transformed3DCardlider(
imageUrl: sliderListImage,
transformType3d: TransformType3d.rotationX,
showBackgroundImage: false,
),
CarouselCustomSlider.transFormedCardSlider(
transformType: TransformType.skew,
imageUrl: sliderListImage,
///You may sometimes get container box error, you need to change [viewportFraction] , [valueScalingFactor] , [horizontalTransform] , [dynamicHeight] value to match with one another,
/// most of the time the problem is solved by changing these two [viewportFraction] , [valueScalingFactor] .
valueScalingFactor: 0.4, //BorderSide.strokeAlignCenter
viewportFraction: 0.7,
customCurve: Curves.bounceInOut,
childrenStackBuilder(int index){
const Positioned(
left: 25,
bottom: 25.0,
child: Text(
'TransformType.skew',
style: TextStyle(color: Colors.white, fontSize: 30.0),
),
),
},
),
CarouselCustomSlider.transFormedCardSlider(
transformType: TransformType.skew1,
imageUrl: sliderListImage,
///You may sometimes get container box error, you need to change [viewportFraction] , [valueScalingFactor] , [horizontalTransform] , [dynamicHeight] value to match with one another,
/// most of the time the problem is solved by changing these two [viewportFraction] , [valueScalingFactor] .
valueScalingFactor: 0.4, //BorderSide.strokeAlignCenter
viewportFraction: 0.7,
customCurve: Curves.bounceInOut,
childrenStackBuilder(int index){
const Positioned(
left: 25,
bottom: 25.0,
child: Text(
'TransformType.skew1',
style: TextStyle(color: Colors.white, fontSize: 30.0),
),
),
},
),
CarouselCustomSlider.transFormedCardSlider(
transformType: TransformType.skew2,
imageUrl: sliderListImage,
///You may sometimes get container box error, you need to change [viewportFraction] , [valueScalingFactor] , [horizontalTransform] , [dynamicHeight] value to match with one another,
/// most of the time the problem is solved by changing these two [viewportFraction] , [valueScalingFactor] .
valueScalingFactor: 0.3, //BorderSide.strokeAlignCenter
viewportFraction: 0.7,
customCurve: Curves.bounceInOut,
childrenStackBuilder(int index){
const Positioned(
left: 25,
bottom: 25.0,
child: Text(
'TransformType.skew2',
style: TextStyle(color: Colors.white, fontSize: 30.0),
),
),
},
),
CarouselCustomSlider.transFormedCardSlider(
transformType: TransformType.rotation,
imageUrl: sliderListImage,
///You may sometimes get container box error, you need to change [viewportFraction] , [valueScalingFactor] , [horizontalTransform] , [dynamicHeight] value to match with one another,
/// most of the time the problem is solved by changing these two [viewportFraction] , [valueScalingFactor] .
valueScalingFactor: 0.3, //BorderSide.strokeAlignCenter
viewportFraction: 0.7,
customCurve: Curves.bounceInOut,
childrenStackBuilder(int index){
const Positioned(
left: 25,
bottom: 25.0,
child: Text(
'TransformType.rotation',
style: TextStyle(color: Colors.white, fontSize: 30.0),
),
),
},
),
CarouselCustomSlider.transFormedCardSlider(
transformType: TransformType.tryInvert,
imageUrl: sliderListImage,
///You may sometimes get container box error, you need to change [viewportFraction] , [valueScalingFactor] , [horizontalTransform] , [dynamicHeight] value to match with one another,
/// most of the time the problem is solved by changing these two [viewportFraction] , [valueScalingFactor] .
valueScalingFactor: 0.3, //BorderSide.strokeAlignCenter
viewportFraction: 0.7,
customCurve: Curves.bounceInOut,
childrenStackBuilder(int index){
const Positioned(
left: 25,
bottom: 25.0,
child: Text(
'TransformType.tryInvert',
style: TextStyle(color: Colors.white, fontSize: 30.0),
),
),
},
),
CarouselCustomSlider.transFormedCardSlider(
transformType: TransformType.diagonal3Values,
imageUrl: sliderListImage,
///You may sometimes get container box error, you need to change [viewportFraction] , [valueScalingFactor] , [horizontalTransform] , [dynamicHeight] value to match with one another,
/// most of the time the problem is solved by changing these two [viewportFraction] , [valueScalingFactor] .
valueScalingFactor: 0.3, //BorderSide.strokeAlignCenter
viewportFraction: 0.7,
customCurve: Curves.bounceInOut,
childrenStackBuilder(int index){
const Positioned(
left: 25,
bottom: 25.0,
child: Text(
'TransformType.diagonal3Values',
style: TextStyle(color: Colors.white, fontSize: 30.0),
),
),
},
),
Getting started
dependencies:
carousel_custom_slider: ^0.0.7+3
How to use
import 'package:carousel_custom_slider/carousel_custom_slider.dart';
You can use these indicators in the effect.
effect : WormEffect(),
effect : JumpingDotEffect(),
effect : ScaleEffect(),
effect : ScrollingDotsEffect(),
effect : SlideEffect(),
effect : ExpandingDotsEffect(),
effect : SwapEffect(),
Additional information
If you have any issues, questions, or suggestions related to this package, please feel free to contact us at swan.dev1993@gmail.com. We welcome your feedback and will do our best to address any problems or provide assistance. For more information about this package, you can also visit our GitHub repository where you can find additional resources, contribute to the package's development, and file issues or bug reports. We appreciate your contributions and feedback, and we aim to make this package as useful as possible for our users. Thank you for using our package, and we look forward to hearing from you!