CardCarousel

Default

Day	Night

Installation

Backpack Compose is available through Maven Central. Check the main Readme for a complete installation guide.

Usage

Example of a Card Carousel:

                                                
                                                import net.skyscanner.backpack.compose.cardcarousel.BpkCardCarousel
                                                import net.skyscanner.backpack.compose.carousel.rememberBpkCarouselState
                                                
                                                val cards = listOf(
                                                    BpkCardCarouselItem(
                                                        title = "Card title 1",
                                                        description = "Description of card 1",
                                                        contentDescription = "imageAccessibilityLabel"
                                                        imageContent = { contentDescription ->
                                                            Image(
                                                                contentScale = ContentScale.Crop,
                                                                painter = painterResource(id = R.drawable.image),
                                                                contentDescription = contentDescription,
                                                            )
                                                        },
                                                    )
                                                )
                                                
                                                val carouselState = rememberBpkCarouselState(totalImages = cards.size, initialImage = initialImage)
                                                
                                                BpkCardCarousel(
                                                    state = carouselState,
                                                    cards = cards,
                                                )

Example of a card changed callback:

                                                
                                                import net.skyscanner.backpack.compose.cardcarousel.BpkCardCarousel
                                                import net.skyscanner.backpack.compose.carousel.rememberBpkCarouselState
                                                
                                                val carouselState = rememberBpkCarouselState(totalImages = cards.size, initialImage = initialImage)
                                                
                                                LaunchedEffect(state.currentPage) {
                                                    print("current page: ${state.currentPage}")
                                                }
                                                
                                                BpkCardCarousel(
                                                    state = carouselState,
                                                    cards = cards,
                                                )

Example of starting in a different image:

                                                
                                                import net.skyscanner.backpack.compose.cardcarousel.BpkCardCarousel
                                                import net.skyscanner.backpack.compose.carousel.rememberBpkCarouselState
                                                
                                                val carouselState = rememberBpkCarouselState(totalImages = cards.size, initialImage = initialImage)
                                                
                                                // show card carousel with card index 1
                                                BpkCardCarousel(
                                                    state = carouselState,
                                                    cards = cards,
                                                )