StackCarousel is a highly customizable and versatile carousel library built using Jetpack Compose, designed to provide a smooth and engaging user experience in Android applications. This library allows developers to create stack-based carousels with various configurations and animations, making it easy to integrate into any Jetpack Compose project.
-
Stack Type Customization:
- Top: Arrange items in the carousel with the stack positioned at the top, creating a descending visual effect as users swipe through the items.
- Bottom: Position the stack at the bottom, with items appearing to rise as they are swiped. This option provides a different visual dynamic and interaction style.
-
Swipe Type Customization:
- Rotate: Apply a rotational effect as users swipe through the carousel.
- Scale: Implement a scaling effect where items large to small.
- Default: Use the standard swipe behavior without additional effects, for a classic carousel experience.
-
Animation Control:
- Enable/Disable Animations: Easily toggle animations on or off based on the application’s requirements, optimizing performance where necessary.
Add the followings to your project level build.gradle
file.
dependencies {
implementation 'com.github.JaberAhamed:StackCarouselCompose:1.0.2'
}
Add the following to your root build.gradle
file:
allprojects {
repositories {
maven { url = 'https://jitpack.io' }
}
}
1. Minimum SDK for this library is API 24.
It's a static carousel there is not animation and not swipe effect.
// list of images
val images =
listOf(...)
// state of carousel
val carouselState = rememberCarouselState(totalPageCount = images.size)
StackCarousel(
modifier =
Modifier.padding(
start = 30.dp,
end = 30.dp
),
state = carouselState,
isEnableAnimation = false,
items = images
) { page: Int ->
Image(
painter = painterResource(id = page),
modifier =
Modifier
.height(400.dp)
.fillMaxWidth(),
contentDescription = "",
contentScale = ContentScale.Crop
)
It's a scale StackCarousel there is animation enable is true and also able to scale effect when swipe the content.
// list of images
val images =
listOf(...)
// state of carousel
val carouselState = rememberCarouselState(totalPageCount = images.size)
StackCarousel(
modifier =
Modifier.padding(
start = 30.dp,
end = 30.dp
),
state = carouselState,
isEnableAnimation = true,
swipeType = SwipeType.Scale,
items = images
) { page: Int ->
Image(
painter = painterResource(id = page),
modifier =
Modifier
.height(400.dp)
.fillMaxWidth(),
contentDescription = "",
contentScale = ContentScale.Crop
)
}
It's a rotate StackCarousel there is animation enable is true and also able to rotate effect when swipe the content.
// list of images
val images =
listOf(...)
// state of carousel
val carouselState = rememberCarouselState(totalPageCount = images.size)
StackCarousel(
modifier =
Modifier.padding(
start = 30.dp,
end = 30.dp
),
state = carouselState,
isEnableAnimation = true,
swipeType = SwipeType.Rotate,
items = images
) { page: Int ->
Image(
painter = painterResource(id = page),
modifier =
Modifier
.height(400.dp)
.fillMaxWidth(),
contentDescription = "",
contentScale = ContentScale.Crop
)
}
It's a top StackCarousel there is animation enable is true and also able to top effect when swipe the content.
// list of images
val images =
listOf(...)
// state of carousel
val carouselState = rememberCarouselState(totalPageCount = images.size)
StackCarousel(
modifier =
Modifier.padding(
start = 30.dp,
end = 30.dp
),
state = carouselState,
isEnableAnimation = true,
stackType = StackType.Top,
items = images
) { page: Int ->
Image(
painter = painterResource(id = page),
modifier =
Modifier
.height(400.dp)
.fillMaxWidth(),
contentDescription = "",
contentScale = ContentScale.Crop
)
}
Give a ⭐️ if this project helped you!
Copyright 2024 JABER BIN AHAMED
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.