This repository demonstrates how to create an image slider using the HorizontalPager component in Jetpack Compose with Kotlin. The image slider allows users to swipe through a series of images horizontally.
- Image Slider: Swipe through multiple images horizontally.
- Jetpack Compose: Built using Jetpack Compose for a modern, declarative UI.
- Kotlin: Fully implemented in Kotlin.
- Clone the repository:
git clone https://github.com/Bhavyansh03-tech/Material3_Buttons.git- Open the project in Android Studio.
- Build and run the app on your Android device or emulator.
import androidx.compose.foundation.ExperimentalFoundationApi import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.offset import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.wrapContentHeight import androidx.compose.foundation.pager.HorizontalPager import androidx.compose.foundation.pager.PageSize import androidx.compose.foundation.pager.rememberPagerState import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.icons.Icons import androidx.compose.material.icons.automirrored.filled.KeyboardArrowLeft import androidx.compose.material.icons.automirrored.filled.KeyboardArrowRight import androidx.compose.material3.Icon import androidx.compose.material3.IconButton import androidx.compose.material3.MaterialTheme import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.res.painterResource import androidx.compose.ui.unit.dp import androidx.compose.runtime.Composable import androidx.compose.runtime.rememberCoroutineScope import androidx.compose.ui.Alignment import kotlinx.coroutines.launch @OptIn(ExperimentalFoundationApi::class) @Composable fun ImageSlider() { val photos = listOf( R.drawable.img1, R.drawable.img2, R.drawable.img3, R.drawable.img4, R.drawable.img5, ) val scope = rememberCoroutineScope() val pagerState = rememberPagerState(pageCount = { photos.size }) Box( modifier = Modifier.fillMaxSize() ) { HorizontalPager( state = pagerState, pageSize = PageSize.Fill, key = { photos[it] } ) { index -> Image( modifier = Modifier.fillMaxSize(), painter = painterResource(id = photos[index]), contentDescription = null, contentScale = ContentScale.Crop ) } } Box( modifier = Modifier .fillMaxSize() .offset(y = -(19).dp), contentAlignment = Alignment.BottomCenter ) { Box( modifier = Modifier .offset(y = -(19).dp) .fillMaxWidth(0.5f) .clip(RoundedCornerShape(100)) .background(MaterialTheme.colorScheme.background) .padding(8.dp) .wrapContentHeight() ) { IconButton( onClick = { scope.launch { pagerState.animateScrollToPage( pagerState.currentPage - 1 ) } }, modifier = Modifier.align(Alignment.CenterStart) ) { Icon( imageVector = Icons.AutoMirrored.Filled.KeyboardArrowLeft, contentDescription = "Go Back" ) } IconButton( onClick = { scope.launch { pagerState.animateScrollToPage( pagerState.currentPage + 1 ) } }, modifier = Modifier.align(Alignment.CenterEnd) ) { Icon( imageVector = Icons.AutoMirrored.Filled.KeyboardArrowRight, contentDescription = "Go Back" ) } } } }Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
1.> Fork the Project.
2.> Create your Feature Branch git checkout -b feature/AmazingFeature.
3.> Commit your Changes git commit -m 'Add some AmazingFeature'.
4.> Push to the Branch git push origin feature/AmazingFeature.
5.> Open a Pull Request
- Inspiration from various Android development tutorials and documentation.
For questions or feedback, please contact @Bhavyansh03-tech.