Carousel
Default
Day | Night |
---|---|
![]() |
![]() |
Installation
Backpack Compose is available through Maven Central. Check the main Readme for a complete installation guide.
Usage
Example of a Carousel:
import net.skyscanner.backpack.compose.carousel.BpkCarousel
import net.skyscanner.backpack.compose.carousel.rememberBpkCarouselState
// show carousel with image index 1
val state = rememberBpkCarouselState(totalImages = totalImages)
BpkCarousel(state){ index ->
Image(painter = painterResource(id = imageResAtIndex(index)), contentDescription = "")
}
Example of a image changed callback:
import androidx.compose.runtime.LaunchedEffect
import net.skyscanner.backpack.compose.carousel.BpkCarousel
import net.skyscanner.backpack.compose.carousel.rememberBpkCarouselState
val state = rememberBpkCarouselState(totalImages = totalImages)
LaunchedEffect(state.currentPage) {
print("current page: ${state.currentPage}")
}
BpkCarousel(state) { index ->
Image(painter = painterResource(id = imageResAtIndex(index)), contentDescription = "")
}
Example of starting in a different image:
import net.skyscanner.backpack.compose.carousel.BpkCarousel
import net.skyscanner.backpack.compose.carousel.rememberBpkCarouselState
// show carousel with image index 1
val state = rememberBpkCarouselState(totalImages = totalImages, currentImage = currentImage)
BpkCarousel(state) { index ->
Image(painter = painterResource(id = imageResAtIndex(index)), contentDescription = "")
}