{"id":109168,"date":"2017-04-18T11:24:02","date_gmt":"2017-04-18T18:24:02","guid":{"rendered":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/power-apps\/ux-patterns-image-slider-control\/"},"modified":"2025-06-11T08:14:36","modified_gmt":"2025-06-11T15:14:36","slug":"ux-patterns-image-slider-control","status":"publish","type":"post","link":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/power-apps\/ux-patterns-image-slider-control\/","title":{"rendered":"UX Patterns: Image Slider Control"},"content":{"rendered":"<p>Image slider is a popular control in web and mobile apps.\u00a0 In our scenario, let\u2019s imagine that we are introducing new features of an app. For that we will build an image slider with an indicator showing current slide and define an action for each slide. Using swipe gesture, you can navigate for slide to slide or you can hit the \u201cSkip\u201d or \u201cGet Started\u201d\u00a0 button to go to the home screen.\u00a0\u00a0 The end result would look like this:<\/p>\n<h2><a href=\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/d219166e-6ea0-491a-8410-83fa754ddc0e.gif\"><img loading=\"lazy\" decoding=\"async\" alt=\"slider2\" height=\"697\" src=\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/d219166e-6ea0-491a-8410-83fa754ddc0e.gif\" style=\"display: inline\" title=\"slider2\" width=\"392\"\/><\/a><\/h2>\n<h2>\u00a0<\/h2>\n<h2>Preparation<\/h2>\n<p>Add images that will be displayed in each slides. (Note: You can also skip this step and provide image urls when defining your data source)<\/p>\n<p><a href=\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/37d87610-f7b8-44a4-b1e5-ab17c12a1408.png\"><img loading=\"lazy\" decoding=\"async\" alt=\"image\" border=\"0\" height=\"434\" src=\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/37d87610-f7b8-44a4-b1e5-ab17c12a1408.png\" style=\"border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px\" title=\"image\" width=\"827\"\/><\/a>\u00a0<\/p>\n<h2>Implementation<\/h2>\n<p>We start by defining the data that represent each slide. We will do it inline here but this can also be fed from a custom API or some other connector.<\/p>\n<p>UpdateContext({items:[{index:0,title:&#8221;If you see a heart icon, tap it to save as a favorite&#8221;,image:Slide1,action:{name:&#8221;Skip&#8221;,screen:HomeScreen}},{index:1,title:&#8221;Get important alerts at the top of your feed&#8221;,image:Slide2,action:{name:&#8221;Skip&#8221;,screen:HomeScreen}},{index:2,title:&#8221;Schedule time off and send your colleagues a calendar notification&#8221;,image:Slide3,action:{name:&#8221;Get Started&#8221;,screen:HomeScreen}}]})<\/p>\n<p><a href=\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/dfb1418b-52e0-4408-8e3b-02d4124dc462.png\"><img loading=\"lazy\" decoding=\"async\" alt=\"image\" border=\"0\" height=\"529\" src=\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/dfb1418b-52e0-4408-8e3b-02d4124dc462.png\" style=\"border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px\" title=\"image\" width=\"1086\"\/><\/a><\/p>\n<p>The structure and names used here is arbitrary. If you are free to define the structure that fits your need. In the example above, I have a collection \u201citems\u201d with 3 items representing each slide. In each item, I define a title, an image and an action. The action will be used to wire up the \u201cSkip\u201d and \u201cGet Started\u201d buttons.<\/p>\n<p>Let\u2019s add a custom gallery with horizontal layout:<\/p>\n<p><a href=\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/18021300-8413-4815-8769-c4d7c8cf58ea.png\"><img loading=\"lazy\" decoding=\"async\" alt=\"image\" border=\"0\" height=\"348\" src=\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/18021300-8413-4815-8769-c4d7c8cf58ea.png\" style=\"border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px\" title=\"image\" width=\"291\"\/><\/a><\/p>\n<p>We add an image, a button and a textbox to the gallery template. Each of these elements will be bind to different properties :<\/p>\n<p><a href=\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/48e8847b-f79e-4e3d-8f46-6b92a5099751.png\"><img loading=\"lazy\" decoding=\"async\" alt=\"image\" border=\"0\" height=\"124\" src=\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/48e8847b-f79e-4e3d-8f46-6b92a5099751.png\" style=\"border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px\" title=\"image\" width=\"898\"\/><\/a><\/p>\n<p>\u00a0<\/p>\n<p><a href=\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/a1f555fb-a0a6-4077-b9e9-44136b1df0ec.png\"><img loading=\"lazy\" decoding=\"async\" alt=\"image\" border=\"0\" height=\"117\" src=\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/a1f555fb-a0a6-4077-b9e9-44136b1df0ec.png\" style=\"border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px\" title=\"image\" width=\"906\"\/><\/a><\/p>\n<p>\u00a0<\/p>\n<p><a href=\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/2339d3ab-e93e-41dc-a6f5-f3e3a55d6529.png\"><img loading=\"lazy\" decoding=\"async\" alt=\"image\" border=\"0\" height=\"280\" src=\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/2339d3ab-e93e-41dc-a6f5-f3e3a55d6529.png\" style=\"border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px\" title=\"image\" width=\"895\"\/><\/a><\/p>\n<p>\u00a0<\/p>\n<p>We set few properties as follow:<\/p>\n<p><a href=\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/ec9e60de-03d2-4c60-81e7-622bbe9f2097.png\"><img loading=\"lazy\" decoding=\"async\" alt=\"image\" border=\"0\" height=\"771\" src=\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/ec9e60de-03d2-4c60-81e7-622bbe9f2097.png\" style=\"border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px\" title=\"image\" width=\"1045\"\/><\/a><\/p>\n<p>\u00a0<\/p>\n<p>We set the Items property of the gallery to items collection we defined earlier.<\/p>\n<p><a href=\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/54369fd4-c792-457d-8693-8b98fce3f17d.png\"><img loading=\"lazy\" decoding=\"async\" alt=\"SNAGHTML2a0d7ce7\" border=\"0\" height=\"432\" src=\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/54369fd4-c792-457d-8693-8b98fce3f17d.png\" style=\"border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px\" title=\"SNAGHTML2a0d7ce7\" width=\"1046\"\/><\/a><\/p>\n<p>\u00a0<\/p>\n<p>now, let\u2019s focus on the indicator. For that, we create another horizontal gallery and we bind its Items property to the same <strong>items<\/strong> collection we defined earlier. We insert a circle (found under Icons) within the template gallery. At this point, you should see 3 dots. You will have to adjust the gallery TemplateSize (~28 or so) property to bring those circles closer together.<\/p>\n<p>In order to synchronize the indicator with the gallery, we use the Default property as follow:<\/p>\n<p>Default = LookUp(items,Value.index =introGallery.VisibleIndex-1) . This will in effect force the selected state of the indicator to match the slider gallery (named introGallery in this sample).<\/p>\n<p><a href=\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/5cc25910-ae0c-454f-a2a0-7a6bd0c7c3f1.png\"><img loading=\"lazy\" decoding=\"async\" alt=\"image\" border=\"0\" height=\"714\" src=\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/5cc25910-ae0c-454f-a2a0-7a6bd0c7c3f1.png\" style=\"border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px\" title=\"image\" width=\"1046\"\/><\/a><\/p>\n<p>\u00a0<\/p>\n<p>Finally, we style the little circle element used inside the gallery template as follow:<\/p>\n<p><a href=\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/ea59adec-574a-45fd-80f5-2975acd39303.png\"><img loading=\"lazy\" decoding=\"async\" alt=\"image\" border=\"0\" height=\"204\" src=\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/ea59adec-574a-45fd-80f5-2975acd39303.png\" style=\"border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px\" title=\"image\" width=\"941\"\/><\/a><\/p>\n<p>Check out the sample <a href=\"https:\/\/1drv.ms\/u\/s!AkoIyjgiwFpYgv1Cngqe7uYYAdHJGQ\">here<\/a><\/p>\n<p>\u00a0<\/p>\n<p><strong>Bonus Exercise<\/strong>: You can add a timer to this control to automatically slide between images after some elapsed time.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Image slider is a popular control in web and mobile apps.&nbsp; In our scenario, let\u2019s imagine that we are introducing new features of an app.<\/p>\n","protected":false},"author":101,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ms_queue_id":[],"ep_exclude_from_search":false,"_classifai_error":"","_classifai_text_to_speech_error":"","_alt_title":"","ms-ems-related-posts":[],"footnotes":""},"audience":[3378],"content-type":[3423],"job-role":[],"product":[3473],"property":[],"topic":[],"coauthors":[2051],"class_list":["post-109168","post","type-post","status-publish","format-standard","hentry","audience-it-professional","content-type-tips-and-guides","product-power-apps"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>UX Patterns: Image Slider Control - Microsoft Power Platform Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/04\/18\/ux-patterns-image-slider-control\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UX Patterns: Image Slider Control - Microsoft Power Platform Blog\" \/>\n<meta property=\"og:description\" content=\"Image slider is a popular control in web and mobile apps.&nbsp; In our scenario, let\u2019s imagine that we are introducing new features of an app.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/power-apps\/ux-patterns-image-slider-control\/\" \/>\n<meta property=\"og:site_name\" content=\"Microsoft Power Platform Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-04-18T18:24:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-11T15:14:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/d219166e-6ea0-491a-8410-83fa754ddc0e.gif\" \/>\n<meta name=\"author\" content=\"Mehdi Slaoui Andaloussi\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mehdi Slaoui Andaloussi\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/04\/18\/ux-patterns-image-slider-control\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/04\/18\/ux-patterns-image-slider-control\/\"},\"author\":[{\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/author\/mehdi-slaoui-andaloussi\/\",\"@type\":\"Person\",\"@name\":\"Mehdi Slaoui Andaloussi\"}],\"headline\":\"UX Patterns: Image Slider Control\",\"datePublished\":\"2017-04-18T18:24:02+00:00\",\"dateModified\":\"2025-06-11T15:14:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/04\/18\/ux-patterns-image-slider-control\/\"},\"wordCount\":461,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/04\/18\/ux-patterns-image-slider-control\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/d219166e-6ea0-491a-8410-83fa754ddc0e.gif\",\"keywords\":[\"Building UI\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/04\/18\/ux-patterns-image-slider-control\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/04\/18\/ux-patterns-image-slider-control\/\",\"url\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/04\/18\/ux-patterns-image-slider-control\/\",\"name\":\"UX Patterns: Image Slider Control - Microsoft Power Platform Blog\",\"isPartOf\":{\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/04\/18\/ux-patterns-image-slider-control\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/04\/18\/ux-patterns-image-slider-control\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/d219166e-6ea0-491a-8410-83fa754ddc0e.gif\",\"datePublished\":\"2017-04-18T18:24:02+00:00\",\"dateModified\":\"2025-06-11T15:14:36+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/04\/18\/ux-patterns-image-slider-control\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/04\/18\/ux-patterns-image-slider-control\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/04\/18\/ux-patterns-image-slider-control\/#primaryimage\",\"url\":\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/d219166e-6ea0-491a-8410-83fa754ddc0e.gif\",\"contentUrl\":\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/d219166e-6ea0-491a-8410-83fa754ddc0e.gif\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/04\/18\/ux-patterns-image-slider-control\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"UX Patterns: Image Slider Control\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#website\",\"url\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/\",\"name\":\"Microsoft Power Platform Blog\",\"description\":\"Innovate with Business Apps\",\"publisher\":{\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#organization\",\"name\":\"Microsoft Power Platform Blog\",\"url\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2020\/03\/Microsoft-Logo-e1685482038800.png\",\"contentUrl\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2020\/03\/Microsoft-Logo-e1685482038800.png\",\"width\":194,\"height\":145,\"caption\":\"Microsoft Power Platform Blog\"},\"image\":{\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#\/schema\/person\/cb94deacde69a416821745caea3a4ea9\",\"name\":\"Mehdi Slaoui Andaloussi\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/7d08f4b5403b8c9bcddc1a86d1029fe871d0429f3b1bcf391b42f4f6de826c74?s=96&d=mm&r=gee4168e8cdfe65faaf608acb5baeaed5\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7d08f4b5403b8c9bcddc1a86d1029fe871d0429f3b1bcf391b42f4f6de826c74?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7d08f4b5403b8c9bcddc1a86d1029fe871d0429f3b1bcf391b42f4f6de826c74?s=96&d=mm&r=g\",\"caption\":\"Mehdi Slaoui Andaloussi\"},\"url\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/author\/mehdis\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"UX Patterns: Image Slider Control - Microsoft Power Platform Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/04\/18\/ux-patterns-image-slider-control\/","og_locale":"en_US","og_type":"article","og_title":"UX Patterns: Image Slider Control - Microsoft Power Platform Blog","og_description":"Image slider is a popular control in web and mobile apps.&nbsp; In our scenario, let\u2019s imagine that we are introducing new features of an app.","og_url":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/power-apps\/ux-patterns-image-slider-control\/","og_site_name":"Microsoft Power Platform Blog","article_published_time":"2017-04-18T18:24:02+00:00","article_modified_time":"2025-06-11T15:14:36+00:00","og_image":[{"url":"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/d219166e-6ea0-491a-8410-83fa754ddc0e.gif","type":"","width":"","height":""}],"author":"Mehdi Slaoui Andaloussi","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mehdi Slaoui Andaloussi","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/04\/18\/ux-patterns-image-slider-control\/#article","isPartOf":{"@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/04\/18\/ux-patterns-image-slider-control\/"},"author":[{"@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/author\/mehdi-slaoui-andaloussi\/","@type":"Person","@name":"Mehdi Slaoui Andaloussi"}],"headline":"UX Patterns: Image Slider Control","datePublished":"2017-04-18T18:24:02+00:00","dateModified":"2025-06-11T15:14:36+00:00","mainEntityOfPage":{"@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/04\/18\/ux-patterns-image-slider-control\/"},"wordCount":461,"commentCount":0,"publisher":{"@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#organization"},"image":{"@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/04\/18\/ux-patterns-image-slider-control\/#primaryimage"},"thumbnailUrl":"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/d219166e-6ea0-491a-8410-83fa754ddc0e.gif","keywords":["Building UI"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/04\/18\/ux-patterns-image-slider-control\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/04\/18\/ux-patterns-image-slider-control\/","url":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/04\/18\/ux-patterns-image-slider-control\/","name":"UX Patterns: Image Slider Control - Microsoft Power Platform Blog","isPartOf":{"@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/04\/18\/ux-patterns-image-slider-control\/#primaryimage"},"image":{"@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/04\/18\/ux-patterns-image-slider-control\/#primaryimage"},"thumbnailUrl":"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/d219166e-6ea0-491a-8410-83fa754ddc0e.gif","datePublished":"2017-04-18T18:24:02+00:00","dateModified":"2025-06-11T15:14:36+00:00","breadcrumb":{"@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/04\/18\/ux-patterns-image-slider-control\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/04\/18\/ux-patterns-image-slider-control\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/04\/18\/ux-patterns-image-slider-control\/#primaryimage","url":"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/d219166e-6ea0-491a-8410-83fa754ddc0e.gif","contentUrl":"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/d219166e-6ea0-491a-8410-83fa754ddc0e.gif"},{"@type":"BreadcrumbList","@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/04\/18\/ux-patterns-image-slider-control\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/"},{"@type":"ListItem","position":2,"name":"UX Patterns: Image Slider Control"}]},{"@type":"WebSite","@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#website","url":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/","name":"Microsoft Power Platform Blog","description":"Innovate with Business Apps","publisher":{"@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#organization","name":"Microsoft Power Platform Blog","url":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2020\/03\/Microsoft-Logo-e1685482038800.png","contentUrl":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2020\/03\/Microsoft-Logo-e1685482038800.png","width":194,"height":145,"caption":"Microsoft Power Platform Blog"},"image":{"@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#\/schema\/person\/cb94deacde69a416821745caea3a4ea9","name":"Mehdi Slaoui Andaloussi","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/7d08f4b5403b8c9bcddc1a86d1029fe871d0429f3b1bcf391b42f4f6de826c74?s=96&d=mm&r=gee4168e8cdfe65faaf608acb5baeaed5","url":"https:\/\/secure.gravatar.com\/avatar\/7d08f4b5403b8c9bcddc1a86d1029fe871d0429f3b1bcf391b42f4f6de826c74?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7d08f4b5403b8c9bcddc1a86d1029fe871d0429f3b1bcf391b42f4f6de826c74?s=96&d=mm&r=g","caption":"Mehdi Slaoui Andaloussi"},"url":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/author\/mehdis\/"}]}},"bloginabox_animated_featured_image":null,"bloginabox_display_generated_audio":false,"distributor_meta":false,"distributor_terms":false,"distributor_media":false,"distributor_original_site_name":"Microsoft Power Platform Blog","distributor_original_site_url":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog","push-errors":false,"_links":{"self":[{"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/posts\/109168","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/users\/101"}],"replies":[{"embeddable":true,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/comments?post=109168"}],"version-history":[{"count":1,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/posts\/109168\/revisions"}],"predecessor-version":[{"id":131294,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/posts\/109168\/revisions\/131294"}],"wp:attachment":[{"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/media?parent=109168"}],"wp:term":[{"taxonomy":"audience","embeddable":true,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/audience?post=109168"},{"taxonomy":"content-type","embeddable":true,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/content-type?post=109168"},{"taxonomy":"job-role","embeddable":true,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/job-role?post=109168"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/product?post=109168"},{"taxonomy":"property","embeddable":true,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/property?post=109168"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/topic?post=109168"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/coauthors?post=109168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}