{"id":231,"date":"2026-09-30T17:16:35","date_gmt":"2026-09-30T17:16:35","guid":{"rendered":"https:\/\/benjaminolsen.dev\/index.php\/2026\/09\/30\/oxygen-swiper\/"},"modified":"2026-09-30T18:21:15","modified_gmt":"2026-09-30T18:21:15","slug":"oxygen-swiper","status":"publish","type":"post","link":"https:\/\/benjaminolsen.dev\/index.php\/2026\/09\/30\/oxygen-swiper\/","title":{"rendered":"Oxygen 6 Swiper: A manual project showcase with two slides"},"content":{"rendered":"<p class=\"bo-doc-status\">Documentation-based practice example; check the controls in your installed Oxygen version.<\/p>\n<nav class=\"bo-doc-toc\" aria-label=\"On this page\">\n<p><strong>On this page<\/strong><\/p>\n<ul>\n<li><a href=\"#overview\">What it does and when to use it<\/a><\/li>\n<li><a href=\"#prerequisites\">Before you start<\/a><\/li>\n<li><a href=\"#example\">Worked example: A manual project showcase with two slides<\/a><\/li>\n<li><a href=\"#result\">Expected result<\/a><\/li>\n<li><a href=\"#troubleshooting\">Troubleshooting<\/a><\/li>\n<li><a href=\"#checks\">Checks before publishing<\/a><\/li>\n<li><a href=\"#references\">Official reference and version notes<\/a><\/li>\n<\/ul>\n<\/nav>\n<section id=\"overview\">\n<h2>What it does and when to use it<\/h2>\n<p>Swiper is the slider element registered in this site\u2019s Oxygen 6.2 beta build. It can use static child slides or an image collection. Its controls include navigation, pagination, touch behavior, responsive slide counts and accessibility messages. This example focuses on one achievable outcome rather than listing every possible setting.<\/p>\n<\/section>\n<section id=\"prerequisites\">\n<h2>Before you start<\/h2>\n<p>Start with a test page and the data or assets described in the example. The values below are starting points, not universal design defaults.<\/p>\n<\/section>\n<section id=\"example\">\n<h2>Worked example: A manual project showcase with two slides<\/h2>\n<p>Scenario: A manual project showcase with two slides. The goal is a useful result on a real project, not a claim that this scenario was a completed client project.<\/p>\n<ol>\n<li>Add Swiper and create two slide children with a title, image and short description.<\/li>\n<li>Keep manual navigation visible and avoid autoplay for essential project information.<\/li>\n<li>Check each slide on a phone, with a keyboard and with reduced-motion preferences.<\/li>\n<\/ol>\n<\/section>\n<section id=\"result\">\n<h2>Expected result<\/h2>\n<p>You should have a manual project showcase with two slides. Verify the result on the frontend using the same content or object described in the steps. A correct builder preview alone does not establish that links, data or interactions work for visitors.<\/p>\n<\/section>\n<section id=\"troubleshooting\">\n<h2>Troubleshooting<\/h2>\n<p>If content is clipped, inspect the slide&#x27;s own width and height as well as the parent. A simple grid is easier to scan when visitors need to compare every project.<\/p>\n<\/section>\n<section id=\"checks\">\n<h2>Checks before publishing<\/h2>\n<p>Use real text and assets rather than a perfect placeholder. Check a long label, narrow screen and empty-data state before publishing.<\/p>\n<ul>\n<li>Compare desktop and narrow-screen layouts using actual content.<\/li>\n<li>Follow every destination and operate interactive controls with a keyboard where applicable.<\/li>\n<li>Check an empty or unavailable-data state when the element depends on a provider.<\/li>\n<\/ul>\n<\/section>\n<section id=\"references\">\n<h2>Official reference and version notes<\/h2>\n<p><a href=\"https:\/\/oxygenbuilder.com\/documentation\/\">Official Swiper reference<\/a> provides the current provider information. This is independent, AI-assisted documentation on Benjamin Olsen\u2019s website; examples are clearly identified as practice recipes.<\/p>\n<p>The native references were checked against the site\u2019s Oxygen 6.2.0-beta.9 installation and public documentation. Individual recipes should still be validated in your project.<\/p>\n<\/section>\n<section id=\"related\">\n<h2>Related guides and tools<\/h2>\n<ul>\n<li><a href=\"https:\/\/benjaminolsen.dev\/index.php\/2026\/09\/30\/oxygen-swiper-slide\/\">Swiper Slide in Oxygen 6<\/a><\/li>\n<li><a href=\"https:\/\/benjaminolsen.dev\/index.php\/2026\/09\/30\/oxygen-image\/\">Oxygen 6 Image: A readable project screenshot<\/a><\/li>\n<\/ul>\n<p><a href=\"https:\/\/benjaminolsen.dev\/index.php\/tools\/\">Explore all tools<\/a> \u00b7 <a href=\"https:\/\/benjaminolsen.dev\/index.php\/guides\/\">Browse the documentation library<\/a><\/p>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>A manual project showcase with two slides. Learn when to use Swiper, follow a practical setup, and diagnose common problems.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_oxygen_hide_in_design_set":false,"_oxygen_tags":"","footnotes":""},"categories":[3,4],"tags":[],"bo_topic":[17],"bo_resource_type":[20],"bo_doc_section":[24],"class_list":["post-231","post","type-post","status-publish","format-standard","hentry","category-guides","category-native-oxygen","bo_topic-oxygen-6"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Oxygen 6 Swiper Guide | Benjamin Olsen<\/title>\n<meta name=\"description\" content=\"Oxygen 6 Swiper explained: a manual project showcase with two slides. Follow setup steps, check the result and fix common problems.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/benjaminolsen.dev\/index.php\/2026\/09\/30\/oxygen-swiper\/\" \/>\n<meta property=\"og:locale\" content=\"da_DK\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Oxygen 6 Swiper Guide | Benjamin Olsen\" \/>\n<meta property=\"og:description\" content=\"Oxygen 6 Swiper explained: a manual project showcase with two slides. Follow setup steps, check the result and fix common problems.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/benjaminolsen.dev\/index.php\/2026\/09\/30\/oxygen-swiper\/\" \/>\n<meta property=\"og:site_name\" content=\"Benjamin Olsen\" \/>\n<meta property=\"article:published_time\" content=\"2026-09-30T17:16:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-30T18:21:15+00:00\" \/>\n<meta name=\"author\" content=\"Benjamin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Benjamin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutter\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/benjaminolsen.dev\\\/index.php\\\/2026\\\/09\\\/30\\\/oxygen-swiper\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/benjaminolsen.dev\\\/index.php\\\/2026\\\/09\\\/30\\\/oxygen-swiper\\\/\"},\"author\":{\"name\":\"Benjamin\",\"@id\":\"https:\\\/\\\/benjaminolsen.dev\\\/#\\\/schema\\\/person\\\/aee4e89bcb6704d860babf7ba16a0b8d\"},\"headline\":\"Oxygen 6 Swiper: A manual project showcase with two slides\",\"datePublished\":\"2026-09-30T17:16:35+00:00\",\"dateModified\":\"2026-09-30T18:21:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/benjaminolsen.dev\\\/index.php\\\/2026\\\/09\\\/30\\\/oxygen-swiper\\\/\"},\"wordCount\":423,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/benjaminolsen.dev\\\/#\\\/schema\\\/person\\\/aee4e89bcb6704d860babf7ba16a0b8d\"},\"articleSection\":[\"Guides\",\"Native Oxygen\"],\"inLanguage\":\"da-DK\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/benjaminolsen.dev\\\/index.php\\\/2026\\\/09\\\/30\\\/oxygen-swiper\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/benjaminolsen.dev\\\/index.php\\\/2026\\\/09\\\/30\\\/oxygen-swiper\\\/\",\"url\":\"https:\\\/\\\/benjaminolsen.dev\\\/index.php\\\/2026\\\/09\\\/30\\\/oxygen-swiper\\\/\",\"name\":\"Oxygen 6 Swiper Guide | Benjamin Olsen\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/benjaminolsen.dev\\\/#website\"},\"datePublished\":\"2026-09-30T17:16:35+00:00\",\"dateModified\":\"2026-09-30T18:21:15+00:00\",\"description\":\"Oxygen 6 Swiper explained: a manual project showcase with two slides. Follow setup steps, check the result and fix common problems.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/benjaminolsen.dev\\\/index.php\\\/2026\\\/09\\\/30\\\/oxygen-swiper\\\/#breadcrumb\"},\"inLanguage\":\"da-DK\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/benjaminolsen.dev\\\/index.php\\\/2026\\\/09\\\/30\\\/oxygen-swiper\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/benjaminolsen.dev\\\/index.php\\\/2026\\\/09\\\/30\\\/oxygen-swiper\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/benjaminolsen.dev\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Oxygen 6 Swiper: A manual project showcase with two slides\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/benjaminolsen.dev\\\/#website\",\"url\":\"https:\\\/\\\/benjaminolsen.dev\\\/\",\"name\":\"Benjamin Olsen\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/benjaminolsen.dev\\\/#\\\/schema\\\/person\\\/aee4e89bcb6704d860babf7ba16a0b8d\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/benjaminolsen.dev\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"da-DK\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/benjaminolsen.dev\\\/#\\\/schema\\\/person\\\/aee4e89bcb6704d860babf7ba16a0b8d\",\"name\":\"Benjamin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"da-DK\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/fda08b9a3a73cd1a57fc39c2a767fb6441b2dbf176857221a8da88161187eeb1?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/fda08b9a3a73cd1a57fc39c2a767fb6441b2dbf176857221a8da88161187eeb1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/fda08b9a3a73cd1a57fc39c2a767fb6441b2dbf176857221a8da88161187eeb1?s=96&d=mm&r=g\",\"caption\":\"Benjamin\"},\"logo\":{\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/fda08b9a3a73cd1a57fc39c2a767fb6441b2dbf176857221a8da88161187eeb1?s=96&d=mm&r=g\"},\"sameAs\":[\"http:\\\/\\\/benjaminolsen.dev\"],\"url\":\"https:\\\/\\\/benjaminolsen.dev\\\/index.php\\\/author\\\/benjamin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Oxygen 6 Swiper Guide | Benjamin Olsen","description":"Oxygen 6 Swiper explained: a manual project showcase with two slides. Follow setup steps, check the result and fix common problems.","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:\/\/benjaminolsen.dev\/index.php\/2026\/09\/30\/oxygen-swiper\/","og_locale":"da_DK","og_type":"article","og_title":"Oxygen 6 Swiper Guide | Benjamin Olsen","og_description":"Oxygen 6 Swiper explained: a manual project showcase with two slides. Follow setup steps, check the result and fix common problems.","og_url":"https:\/\/benjaminolsen.dev\/index.php\/2026\/09\/30\/oxygen-swiper\/","og_site_name":"Benjamin Olsen","article_published_time":"2026-09-30T17:16:35+00:00","article_modified_time":"2026-09-30T18:21:15+00:00","author":"Benjamin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Benjamin","Est. reading time":"2 minutter"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/benjaminolsen.dev\/index.php\/2026\/09\/30\/oxygen-swiper\/#article","isPartOf":{"@id":"https:\/\/benjaminolsen.dev\/index.php\/2026\/09\/30\/oxygen-swiper\/"},"author":{"name":"Benjamin","@id":"https:\/\/benjaminolsen.dev\/#\/schema\/person\/aee4e89bcb6704d860babf7ba16a0b8d"},"headline":"Oxygen 6 Swiper: A manual project showcase with two slides","datePublished":"2026-09-30T17:16:35+00:00","dateModified":"2026-09-30T18:21:15+00:00","mainEntityOfPage":{"@id":"https:\/\/benjaminolsen.dev\/index.php\/2026\/09\/30\/oxygen-swiper\/"},"wordCount":423,"commentCount":0,"publisher":{"@id":"https:\/\/benjaminolsen.dev\/#\/schema\/person\/aee4e89bcb6704d860babf7ba16a0b8d"},"articleSection":["Guides","Native Oxygen"],"inLanguage":"da-DK","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/benjaminolsen.dev\/index.php\/2026\/09\/30\/oxygen-swiper\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/benjaminolsen.dev\/index.php\/2026\/09\/30\/oxygen-swiper\/","url":"https:\/\/benjaminolsen.dev\/index.php\/2026\/09\/30\/oxygen-swiper\/","name":"Oxygen 6 Swiper Guide | Benjamin Olsen","isPartOf":{"@id":"https:\/\/benjaminolsen.dev\/#website"},"datePublished":"2026-09-30T17:16:35+00:00","dateModified":"2026-09-30T18:21:15+00:00","description":"Oxygen 6 Swiper explained: a manual project showcase with two slides. Follow setup steps, check the result and fix common problems.","breadcrumb":{"@id":"https:\/\/benjaminolsen.dev\/index.php\/2026\/09\/30\/oxygen-swiper\/#breadcrumb"},"inLanguage":"da-DK","potentialAction":[{"@type":"ReadAction","target":["https:\/\/benjaminolsen.dev\/index.php\/2026\/09\/30\/oxygen-swiper\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/benjaminolsen.dev\/index.php\/2026\/09\/30\/oxygen-swiper\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/benjaminolsen.dev\/"},{"@type":"ListItem","position":2,"name":"Oxygen 6 Swiper: A manual project showcase with two slides"}]},{"@type":"WebSite","@id":"https:\/\/benjaminolsen.dev\/#website","url":"https:\/\/benjaminolsen.dev\/","name":"Benjamin Olsen","description":"","publisher":{"@id":"https:\/\/benjaminolsen.dev\/#\/schema\/person\/aee4e89bcb6704d860babf7ba16a0b8d"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/benjaminolsen.dev\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"da-DK"},{"@type":["Person","Organization"],"@id":"https:\/\/benjaminolsen.dev\/#\/schema\/person\/aee4e89bcb6704d860babf7ba16a0b8d","name":"Benjamin","image":{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/secure.gravatar.com\/avatar\/fda08b9a3a73cd1a57fc39c2a767fb6441b2dbf176857221a8da88161187eeb1?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/fda08b9a3a73cd1a57fc39c2a767fb6441b2dbf176857221a8da88161187eeb1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/fda08b9a3a73cd1a57fc39c2a767fb6441b2dbf176857221a8da88161187eeb1?s=96&d=mm&r=g","caption":"Benjamin"},"logo":{"@id":"https:\/\/secure.gravatar.com\/avatar\/fda08b9a3a73cd1a57fc39c2a767fb6441b2dbf176857221a8da88161187eeb1?s=96&d=mm&r=g"},"sameAs":["http:\/\/benjaminolsen.dev"],"url":"https:\/\/benjaminolsen.dev\/index.php\/author\/benjamin\/"}]}},"_links":{"self":[{"href":"https:\/\/benjaminolsen.dev\/index.php\/wp-json\/wp\/v2\/posts\/231","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/benjaminolsen.dev\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/benjaminolsen.dev\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/benjaminolsen.dev\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/benjaminolsen.dev\/index.php\/wp-json\/wp\/v2\/comments?post=231"}],"version-history":[{"count":2,"href":"https:\/\/benjaminolsen.dev\/index.php\/wp-json\/wp\/v2\/posts\/231\/revisions"}],"predecessor-version":[{"id":577,"href":"https:\/\/benjaminolsen.dev\/index.php\/wp-json\/wp\/v2\/posts\/231\/revisions\/577"}],"wp:attachment":[{"href":"https:\/\/benjaminolsen.dev\/index.php\/wp-json\/wp\/v2\/media?parent=231"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/benjaminolsen.dev\/index.php\/wp-json\/wp\/v2\/categories?post=231"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/benjaminolsen.dev\/index.php\/wp-json\/wp\/v2\/tags?post=231"},{"taxonomy":"bo_topic","embeddable":true,"href":"https:\/\/benjaminolsen.dev\/index.php\/wp-json\/wp\/v2\/bo_topic?post=231"},{"taxonomy":"bo_resource_type","embeddable":true,"href":"https:\/\/benjaminolsen.dev\/index.php\/wp-json\/wp\/v2\/bo_resource_type?post=231"},{"taxonomy":"bo_doc_section","embeddable":true,"href":"https:\/\/benjaminolsen.dev\/index.php\/wp-json\/wp\/v2\/bo_doc_section?post=231"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}