{"id":20881464,"url":"https://github.com/js-bhavyansh/image_slider","last_synced_at":"2026-04-24T17:03:37.132Z","repository":{"id":242376457,"uuid":"809033633","full_name":"js-bhavyansh/Image_Slider","owner":"js-bhavyansh","description":"Creating a image slider using horizontal pager in jetpack compose.","archived":false,"fork":false,"pushed_at":"2024-06-08T14:00:49.000Z","size":2923,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-19T10:08:02.953Z","etag":null,"topics":["andriod","android-application","horizontal-pager","horizontal-scrolling","image-slider","jetpack-compose","jetpack-navigation","kotlin","kotlin-android","kotlin-library","pager","pager-android"],"latest_commit_sha":null,"homepage":"","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/js-bhavyansh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-01T13:52:35.000Z","updated_at":"2025-01-16T23:32:07.000Z","dependencies_parsed_at":"2024-06-08T15:22:31.224Z","dependency_job_id":null,"html_url":"https://github.com/js-bhavyansh/Image_Slider","commit_stats":null,"previous_names":["bhavyansh03-tech/image_slider","js-bhavyansh/image_slider"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/js-bhavyansh%2FImage_Slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/js-bhavyansh%2FImage_Slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/js-bhavyansh%2FImage_Slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/js-bhavyansh%2FImage_Slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/js-bhavyansh","download_url":"https://codeload.github.com/js-bhavyansh/Image_Slider/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243258498,"owners_count":20262300,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["andriod","android-application","horizontal-pager","horizontal-scrolling","image-slider","jetpack-compose","jetpack-navigation","kotlin","kotlin-android","kotlin-library","pager","pager-android"],"created_at":"2024-11-18T07:24:58.000Z","updated_at":"2026-04-24T17:03:32.111Z","avatar_url":"https://github.com/js-bhavyansh.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Image Slider using HorizontalPager in Jetpack Compose\n\nThis 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.\n\n## Features\n\n- **Image Slider**: Swipe through multiple images horizontally.\n- **Jetpack Compose**: Built using Jetpack Compose for a modern, declarative UI.\n- **Kotlin**: Fully implemented in Kotlin.\n\n## Screenshots\n\n\u003cdiv style=\"display: flex; justify-content: center; align-items: center;\"\u003e\n    \u003cimg src=\"https://github.com/Bhavyansh03-tech/Image_Slider/assets/96388594/55f9c7b6-e2af-4432-bda4-7c81a9b7696c\" alt=\"First Screenshot\" style=\"width: 200px; height: auto; margin-right: 10px;\"\u003e\n    \u003cimg src=\"https://github.com/Bhavyansh03-tech/Image_Slider/assets/96388594/a2c93fe6-d29d-4ec9-8164-b10a31b4dabb\" alt=\"Second Screenshot\" style=\"width: 200px; height: auto;\"\u003e\n\u003c/div\u003e\n\n## Getting Started\n\n1. Clone the repository:\n\n```bash\ngit clone https://github.com/Bhavyansh03-tech/Material3_Buttons.git\n```\n\n2. Open the project in Android Studio.\n3. Build and run the app on your Android device or emulator.\n\n\n## Implementation\n\n```Kotlin\nimport androidx.compose.foundation.ExperimentalFoundationApi\nimport androidx.compose.foundation.Image\nimport androidx.compose.foundation.background\nimport androidx.compose.foundation.layout.Box\nimport androidx.compose.foundation.layout.fillMaxSize\nimport androidx.compose.foundation.layout.fillMaxWidth\nimport androidx.compose.foundation.layout.offset\nimport androidx.compose.foundation.layout.padding\nimport androidx.compose.foundation.layout.wrapContentHeight\nimport androidx.compose.foundation.pager.HorizontalPager\nimport androidx.compose.foundation.pager.PageSize\nimport androidx.compose.foundation.pager.rememberPagerState\nimport androidx.compose.foundation.shape.RoundedCornerShape\nimport androidx.compose.material.icons.Icons\nimport androidx.compose.material.icons.automirrored.filled.KeyboardArrowLeft\nimport androidx.compose.material.icons.automirrored.filled.KeyboardArrowRight\nimport androidx.compose.material3.Icon\nimport androidx.compose.material3.IconButton\nimport androidx.compose.material3.MaterialTheme\nimport androidx.compose.ui.Modifier\nimport androidx.compose.ui.draw.clip\nimport androidx.compose.ui.layout.ContentScale\nimport androidx.compose.ui.res.painterResource\nimport androidx.compose.ui.unit.dp\nimport androidx.compose.runtime.Composable\nimport androidx.compose.runtime.rememberCoroutineScope\nimport androidx.compose.ui.Alignment\nimport kotlinx.coroutines.launch\n\n@OptIn(ExperimentalFoundationApi::class)\n@Composable\nfun ImageSlider() {\n\n    val photos = listOf(\n        R.drawable.img1,\n        R.drawable.img2,\n        R.drawable.img3,\n        R.drawable.img4,\n        R.drawable.img5,\n    )\n\n    val scope = rememberCoroutineScope()\n    val pagerState = rememberPagerState(pageCount = { photos.size })\n\n    Box(\n        modifier = Modifier.fillMaxSize()\n    ) {\n        HorizontalPager(\n            state = pagerState,\n            pageSize = PageSize.Fill,\n            key = { photos[it] }\n        ) { index -\u003e\n            Image(\n                modifier = Modifier.fillMaxSize(),\n                painter = painterResource(id = photos[index]),\n                contentDescription = null,\n                contentScale = ContentScale.Crop\n            )\n        }\n    }\n\n    Box(\n        modifier = Modifier\n            .fillMaxSize()\n            .offset(y = -(19).dp),\n        contentAlignment = Alignment.BottomCenter\n    ) {\n        Box(\n            modifier = Modifier\n                .offset(y = -(19).dp)\n                .fillMaxWidth(0.5f)\n                .clip(RoundedCornerShape(100))\n                .background(MaterialTheme.colorScheme.background)\n                .padding(8.dp)\n                .wrapContentHeight()\n        ) {\n            IconButton(\n                onClick = {\n                    scope.launch {\n                        pagerState.animateScrollToPage(\n                            pagerState.currentPage - 1\n                        )\n                    }\n                },\n                modifier = Modifier.align(Alignment.CenterStart)\n            ) {\n                Icon(\n                    imageVector = Icons.AutoMirrored.Filled.KeyboardArrowLeft,\n                    contentDescription = \"Go Back\"\n                )\n            }\n\n            IconButton(\n                onClick = {\n                    scope.launch {\n                        pagerState.animateScrollToPage(\n                            pagerState.currentPage + 1\n                        )\n                    }\n                },\n                modifier = Modifier.align(Alignment.CenterEnd)\n            ) {\n                Icon(\n                    imageVector = Icons.AutoMirrored.Filled.KeyboardArrowRight,\n                    contentDescription = \"Go Back\"\n                )\n            }\n        }\n    }\n}\n```\n\n\n## Contributing\n\nContributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.\n\n1.\u003e Fork the Project.\\\n2.\u003e Create your Feature Branch `git checkout -b feature/AmazingFeature`.\\\n3.\u003e Commit your Changes `git commit -m 'Add some AmazingFeature'`.\\\n4.\u003e Push to the Branch `git push origin feature/AmazingFeature`.\\\n5.\u003e Open a Pull Request\n\n## Acknowledgements\n\n- Inspiration from various Android development tutorials and documentation.\n## Contact\n\nFor questions or feedback, please contact [@Bhavyansh03-tech](https://github.com/Bhavyansh03-tech).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjs-bhavyansh%2Fimage_slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjs-bhavyansh%2Fimage_slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjs-bhavyansh%2Fimage_slider/lists"}