{"id":20931647,"url":"https://github.com/johnwargo/ionic-slides-example","last_synced_at":"2026-04-27T10:31:58.816Z","repository":{"id":38546210,"uuid":"264026425","full_name":"johnwargo/ionic-slides-example","owner":"johnwargo","description":"A sample implementation of ion-slides","archived":false,"fork":false,"pushed_at":"2023-10-11T06:59:32.000Z","size":690,"stargazers_count":1,"open_issues_count":2,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-12-29T04:29:29.613Z","etag":null,"topics":["ionic"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/johnwargo.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2020-05-14T21:13:33.000Z","updated_at":"2021-06-16T00:20:58.000Z","dependencies_parsed_at":"2025-03-13T02:16:56.392Z","dependency_job_id":"d95b6e0f-c0f3-4b20-97d8-27f24898f771","html_url":"https://github.com/johnwargo/ionic-slides-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/johnwargo/ionic-slides-example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnwargo%2Fionic-slides-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnwargo%2Fionic-slides-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnwargo%2Fionic-slides-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnwargo%2Fionic-slides-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/johnwargo","download_url":"https://codeload.github.com/johnwargo/ionic-slides-example/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnwargo%2Fionic-slides-example/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32333196,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-26T23:26:28.701Z","status":"online","status_checked_at":"2026-04-27T02:00:06.769Z","response_time":128,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["ionic"],"created_at":"2024-11-18T21:44:37.473Z","updated_at":"2026-04-27T10:31:58.773Z","avatar_url":"https://github.com/johnwargo.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/johnwargo"],"categories":[],"sub_categories":[],"readme":"# Ionic Slides Example\n\nWhen I first used Ionic Slides (https://ionicframework.com/docs/api/slides) I couldn't find any complete examples I could use as a starting point for my application. Josh Morony's [Building Mobile Apps with Ionic \u0026 Angular](https://www.joshmorony.com/building-mobile-apps-with-ionic-2) book introduced me to the topic, but didn't give me the playground I needed to tweak the slides example to better understand how to get text and images to work on the same slide, how to scale slide images to fit the screen, and more.\n\nWith that in mind, I decided to craft my own example nd make it available for others interested in learning how to add slides to their Ionic applications (in two different configurations).\n\n**Note:** The screenshots used in this example app are from my [Time Slicer](https://timeslicer.app) app; this was the first app of my own that I used Ionic Slides for, so that's where I learned how to do this.\n\nTo use this sample:\n\n1. Make sure you have [git](https://git-scm.com/) and [node.js](https://nodejs.org/en/) installed on your system\n2. Open a terminal window or command prompt\n3. Execute the following command:\n\n```shell\ngit clone https://github.com/johnwargo/ionic-slides-example\n```\n\nThis will copy the source code from GitHub (where I work) to a folder called `ionic-slides-example`. Next, execute the following commands:\n\n```shell\ncd ionic-slides-example\nnpm install\n```\n\nAssuming you have the [Ionic CLI](https://ionicframework.com/getting-started) installed, execute the following command:\n\n```shell\nionic serve\n```\n\nYour default browser will open then display the following page:\n\n![Home Screen](images/home-page.png)\n\nPlay around with the two slides options to see how the app works.\n\nI did two slides implementations in this app because so many examples show Ionic Slides only using images, no text. Since the way you implement them are different, I decided to include both.\n\n## Slides Without Text\n\nImplementing `ion-slides` without text is easy, wrap each image with an `\u003cion-slide\u003e` and you're good:\n\n```HTML\n\u003cion-slides pager=\"true\"\u003e\n    \u003cion-slide\u003e\n      \u003cion-img class=\"screenshot\" src=\"assets/intro-01.png\"\u003e\u003c/ion-img\u003e\n    \u003c/ion-slide\u003e\n\n    \u003cion-slide\u003e\n      \u003cion-img class=\"screenshot\" src=\"assets/intro-02.png\"\u003e\u003c/ion-img\u003e\n    \u003c/ion-slide\u003e\n\n    \u003cion-slide\u003e\n      \u003cion-img class=\"screenshot\" src=\"assets/intro-03.png\"\u003e\u003c/ion-img\u003e\n    \u003c/ion-slide\u003e\n\n    \u003cion-slide\u003e\n      \u003cion-img class=\"screenshot\" src=\"assets/intro-04.png\"\u003e\u003c/ion-img\u003e\n    \u003c/ion-slide\u003e\n\n    \u003cion-slide\u003e\n        \u003cion-img class=\"screenshot\" src=\"assets/intro-05.png\"\u003e\u003c/ion-img\u003e\n    \u003c/ion-slide\u003e\n\u003c/ion-slides\u003e\n```\n\nHowever, once you add additional 'stuff' to the page, the extra stuff stops aligning properly. To fix this, I found that I had to a grid with rows and columns. The last slide in the series, the one that has the Home button on it, looks like this:\n\n```html\n\u003cion-slide\u003e\n    \u003cion-grid\u003e\n        \u003cion-row\u003e\n          \u003cion-img class=\"screenshot\" src=\"assets/intro-05.png\"\u003e\u003c/ion-img\u003e\n        \u003c/ion-row\u003e\n        \u003cion-row\u003e\n          \u003cion-col\u003e\n            \u003cion-button color=\"primary\" style=\"margin-top:20px;\" (click)=\"goHome()\"\u003e\n              Go Home\n            \u003c/ion-button\u003e\n          \u003c/ion-col\u003e\n        \u003c/ion-row\u003e\n    \u003c/ion-grid\u003e\n\u003c/ion-slide\u003e\n```\n\nWhen I first implemented this, I noticed that the page indicator at the bottom of the page didn't align properly with the other content on the page (it overlapped the image). To solve this, I found a solution on [Stack Overflow](https://stackoverflow.com/questions/55566105/ion-slides-pagination-bullet-overlap-the-slides-content-ionic-4). I added the following code to the project's `global.scss` file and everything worked perfectly (well, more or less).\n\n```css\n.swiper-pagination {\n    position: fixed;\n    bottom: 0px;\n    padding-bottom: 3px;\n}\n```\n\nStyling the rest of the page was pretty easy. I set a background color for one of the pages using this:\n\n```css\nion-slide {\n    background-color: lightgrey;\n}\n```\n\nWhen you test the app, notice how the whole page doesn't get the background color until you get to the last page in the slide show.  I'm sure I could fix this with a little CSS, but I'll leave that up to you - this sample app gives you a playground you can use to figure out all sorts of styling for the Slides.\n\nI made sure the image sized correctly using the following CSS:\n\n```css\nion-img {\n    margin-left: auto;\n    margin-right: auto;\n    width: 75%;\n    max-width: 800px;\n    max-height: 60%;\n}\n```\n\nAnd my Home button overlapped the pager component a bit, so I gave it a bottom margin using the following:\n\n```css\nion-button {\n    margin-bottom: 30px;\n}\n```\n\n## Slides With Text\n\nAs I mentioned in the previous section, as soon as a Slide has more than just an image, layout of the slides components goes all wonky. I'm sure it was for good reason, but I'm not enough of a CSS expert to figure out the best way to make it all look the way I wanted. Instead, I used `\u003cion-grid\u003e`, `\u003cion-row\u003e`, and `\u003cion-col\u003e` components to layout sections like I wanted. It all works pretty well - here's an example from one of the app's slides:\n\n\n```html\n\u003cion-slide\u003e\n    \u003cion-grid\u003e\n        \u003cion-row\u003e\n            \u003cion-col\u003e\n                \u003cp\u003eTime Slicer is like a \u003cstrong\u003eStopwatch\u003c/strong\u003e\u003cbr /\u003ewith \u003cstrong\u003eCategories\u003c/strong\u003e.\u003c/p\u003e\n              \u003c/ion-col\u003e\n        \u003c/ion-row\u003e\n        \u003cion-row\u003e\n            \u003cion-col\u003e\n                \u003cion-img src=\"assets/intro-01.png\"\u003e\u003c/ion-img\u003e\n            \u003c/ion-col\u003e\n        \u003c/ion-row\u003e\n    \u003c/ion-grid\u003e\n\u003c/ion-slide\u003e\n```\n\n***\n\nYou can find information on many different topics on my [personal blog](http://www.johnwargo.com). Learn about all of my publications at [John Wargo Books](http://www.johnwargobooks.com).\n\nIf you find this code useful and feel like thanking me for providing it, please consider \u003ca href=\"https://www.buymeacoffee.com/johnwargo\" target=\"_blank\"\u003eBuying Me a Coffee\u003c/a\u003e, or making a purchase from [my Amazon Wish List](https://amzn.com/w/1WI6AAUKPT5P9).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohnwargo%2Fionic-slides-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjohnwargo%2Fionic-slides-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohnwargo%2Fionic-slides-example/lists"}