{"id":4879,"date":"2021-05-10T02:00:00","date_gmt":"2021-05-10T00:00:00","guid":{"rendered":"https:\/\/alvarotrigo.com\/epa\/create-a-slider-with-pure-css\/"},"modified":"2025-06-10T10:34:07","modified_gmt":"2025-06-10T08:34:07","slug":"create-a-slider-with-pure-css","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/create-a-slider-with-pure-css\/","title":{"rendered":"Create a slider with pure CSS"},"content":{"rendered":"\n<p>I know what you&#8217;re thinking. &#8220;<em>What do you mean, create a slider with just CSS! Surely you need JavaScript to control the behaviour of the slider?<\/em>&#8220;<\/p>\n\n\n\n<p>Actually, there is a clever way to do this with pure CSS, and not a single line of JS. And yes, that includes navigation buttons and breadcrumbs!<\/p>\n\n\n\n<p>Take a quick look at the result we will get:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_bGqgqeK\" data-src=\"\/\/codepen.io\/anon\/embed\/bGqgqeK?height=450&amp;theme-id=1&amp;slug-hash=bGqgqeK&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed bGqgqeK\" title=\"CodePen Embed bGqgqeK\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Read on to find out how&#8230;<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"step-1---create-your-slider-layout\">Step 1 &#8211; create your slider layout<\/h2>\n\n\n<p>First you need to create a space for your slider to go into, and of course, some slides!<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"slider-container\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"slider\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"slides\"<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"slides__1\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"slide\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"slide__text\"<\/span>&gt;<\/span>1<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"slides__2\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"slide\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"slide__text\"<\/span>&gt;<\/span>2<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"slides__3\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"slide\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"slide__text\"<\/span>&gt;<\/span>3<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"slides__4\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"slide\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"slide__text\"<\/span>&gt;<\/span>4<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>So here we have:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>slider-container<\/code> is just the element on your site that you want the slider to go in.<\/li>\n\n\n\n<li><code>slider<\/code> is like the &#8216;screen&#8217;, or the viewport that will display all your slides.<\/li>\n\n\n\n<li><code>slides<\/code> will hold your slides. This is the element that actually scrolls to give the slider effect.<\/li>\n\n\n\n<li><code>slide<\/code> is each individual slide. Note that you need the <code>slide<\/code> class, <em>and<\/em> a unique id for each one.<\/li>\n<\/ul>\n\n\n\n<p>Then we need the CSS:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\">\n<span class=\"hljs-selector-class\">.slider-container<\/span> {\n    <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">linear-gradient<\/span>(<span class=\"hljs-number\">149deg<\/span>, rgb(<span class=\"hljs-number\">247<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">255<\/span>) <span class=\"hljs-number\">0%<\/span>, <span class=\"hljs-built_in\">rgb<\/span>(<span class=\"hljs-number\">255<\/span>, <span class=\"hljs-number\">145<\/span>, <span class=\"hljs-number\">0<\/span>) <span class=\"hljs-number\">100%<\/span>);\n    <span class=\"hljs-attribute\">display<\/span>: flex;\n    <span class=\"hljs-attribute\">align-items<\/span>: center;\n    <span class=\"hljs-attribute\">justify-content<\/span>: center;\n    <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">100%<\/span>;\n}\n\n<span class=\"hljs-selector-class\">.slider<\/span> {\n    <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n    <span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">600px<\/span>;\n    <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">400px<\/span>;\n    <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">20px<\/span>;\n    <span class=\"hljs-attribute\">text-align<\/span>: center;\n    <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">20px<\/span>;\n    <span class=\"hljs-attribute\">position<\/span>: relative;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><code>slider-container<\/code> can be anything &#8211; I&#8217;ve just used a flexbox to make it easy to centre the slider. But if you prefer, you can use CSS Grid <\/p>\n\n\n\n<p><code>slider<\/code> just sets the size of your slider &#8211; you can adjust this to suit your needs.<\/p>\n\n\n\n<p>Next, we&#8217;ll style the <code>slides<\/code> element:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.slides<\/span> {\n    <span class=\"hljs-attribute\">display<\/span>: flex;\n    <span class=\"hljs-attribute\">overflow-x<\/span>: scroll;\n    <span class=\"hljs-attribute\">position<\/span>: relative;\n    <span class=\"hljs-attribute\">scroll-behavior<\/span>: smooth;\n    <span class=\"hljs-attribute\">scroll-snap-type<\/span>: x mandatory;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>OK, this is where the magic happens. If we set <code>overflow-x<\/code> to scroll, anything that <em>doesn&#8217;t<\/em> fit in our <code>slider<\/code> viewport will be accessible only by scrolling.<\/p>\n\n\n\n<p>Setting <code>scroll-behavior<\/code> to <code>smooth<\/code> and <code>scroll-snap-type<\/code> to <code>x mandatory<\/code> means that if we jump-link to any child element of <code>slides<\/code>, the browser will scroll to it smoothly, rather than just jumping immediately to that element.<\/p>\n\n\n\n<p>Right, next let&#8217;s style the slides themselves:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.slide<\/span><span class=\"hljs-selector-pseudo\">:nth-of-type(even)<\/span> {\n    <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-built_in\">rgb<\/span>(<span class=\"hljs-number\">250<\/span>, <span class=\"hljs-number\">246<\/span>, <span class=\"hljs-number\">212<\/span>);\n}\n\n<span class=\"hljs-selector-class\">.slide<\/span> {\n    <span class=\"hljs-attribute\">display<\/span>: flex;\n    <span class=\"hljs-attribute\">justify-content<\/span>: center;\n    <span class=\"hljs-attribute\">align-items<\/span>: center;\n    <span class=\"hljs-attribute\">flex-shrink<\/span>: <span class=\"hljs-number\">0<\/span>;\n    <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n    <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">400px<\/span>;\n    <span class=\"hljs-attribute\">margin-right<\/span>: <span class=\"hljs-number\">0px<\/span>;\n    <span class=\"hljs-attribute\">box-sizing<\/span>: border-box;\n    <span class=\"hljs-attribute\">background<\/span>: white;\n    <span class=\"hljs-attribute\">transform-origin<\/span>: center center;\n    <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">scale<\/span>(<span class=\"hljs-number\">1<\/span>);\n    <span class=\"hljs-attribute\">scroll-snap-align<\/span>: center;\n}\n\n<span class=\"hljs-selector-class\">.slide__text<\/span> {\n    <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">40px<\/span>;\n    <span class=\"hljs-attribute\">font-weight<\/span>: bold;\n    <span class=\"hljs-attribute\">font-family<\/span>: sans-serif;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Match the size of <code>slide<\/code> to be the same as <code>slider<\/code>. The final three properties, <code>transform-origin<\/code>, <code>transform<\/code>, and <code>scroll-snap-align<\/code>, are key. These ensure that when we jump-link to any particular slide, the slide will &#8216;snap&#8217; into the middle of the slider viewport.<\/p>\n\n\n\n<p>OK, so far we have this:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_yLjBxEb\" data-src=\"\/\/codepen.io\/anon\/embed\/yLjBxEb?height=450&amp;theme-id=1&amp;slug-hash=yLjBxEb&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed yLjBxEb\" title=\"CodePen Embed yLjBxEb\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>If you click inside the slider, then press the arrow keys, you&#8217;ll see the smooth scrolling and snapping behaviour in action.<\/p>\n\n\n\n<p>But of course we don&#8217;t want our users to have to do this! We want to put some navigation buttons on the slider instead &#8211; and we should probably get rid of that scrollbar too!<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"step-2---adding-the-slider-navigation-buttons\">Step 2 &#8211; Adding the slider navigation buttons<\/h2>\n\n\n<p>In the HTML, I&#8217;ve added two <code>a<\/code> elements to each slide:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"slider-container\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"slider\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"slides\"<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"slides__1\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"slide\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"slide__text\"<\/span>&gt;<\/span>1<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"slide__prev\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#slides__4\"<\/span> <span class=\"hljs-attr\">title<\/span>=<span class=\"hljs-string\">\"Next\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"slide__next\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#slides__2\"<\/span> <span class=\"hljs-attr\">title<\/span>=<span class=\"hljs-string\">\"Next\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"slides__2\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"slide\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"slide__text\"<\/span>&gt;<\/span>2<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"slide__prev\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#slides__1\"<\/span> <span class=\"hljs-attr\">title<\/span>=<span class=\"hljs-string\">\"Prev\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"slide__next\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#slides__3\"<\/span> <span class=\"hljs-attr\">title<\/span>=<span class=\"hljs-string\">\"Next\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"slides__3\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"slide\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"slide__text\"<\/span>&gt;<\/span>3<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"slide__prev\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#slides__2\"<\/span> <span class=\"hljs-attr\">title<\/span>=<span class=\"hljs-string\">\"Prev\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"slide__next\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#slides__4\"<\/span> <span class=\"hljs-attr\">title<\/span>=<span class=\"hljs-string\">\"Next\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"slides__4\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"slide\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"slide__text\"<\/span>&gt;<\/span>4<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"slide__prev\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#slides__3\"<\/span> <span class=\"hljs-attr\">title<\/span>=<span class=\"hljs-string\">\"Prev\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"slide__next\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#slides__1\"<\/span> <span class=\"hljs-attr\">title<\/span>=<span class=\"hljs-string\">\"Prev\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Note that:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The one going <em>backwards<\/em> has the <code>slide__prev<\/code> class, and the one going <em>forwards<\/em> has the <code>slide__next<\/code> class.<\/li>\n\n\n\n<li>the <code>href<\/code> contains the jump link to the slide we want to move to. You have to set these manually.<\/li>\n<\/ul>\n\n\n\n<p>Now for the css:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.slide<\/span> <span class=\"hljs-selector-tag\">a<\/span> {\n    <span class=\"hljs-attribute\">position<\/span>: absolute;\n    <span class=\"hljs-attribute\">top<\/span>: <span class=\"hljs-number\">48%<\/span>;\n    <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">35px<\/span>;\n    <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">35px<\/span>;\n    <span class=\"hljs-attribute\">border<\/span>: solid black;\n    <span class=\"hljs-attribute\">border-width<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">4px<\/span> <span class=\"hljs-number\">4px<\/span> <span class=\"hljs-number\">0<\/span>;\n    <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">3px<\/span>;\n    <span class=\"hljs-attribute\">box-sizing<\/span>: border-box;\n}\n\n<span class=\"hljs-selector-tag\">a<\/span><span class=\"hljs-selector-class\">.slide__prev<\/span> {\n    <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">rotate<\/span>(<span class=\"hljs-number\">135deg<\/span>);\n    <span class=\"hljs-attribute\">-webkit-transform<\/span>: <span class=\"hljs-built_in\">rotate<\/span>(<span class=\"hljs-number\">135deg<\/span>);\n    <span class=\"hljs-attribute\">left<\/span>: <span class=\"hljs-number\">5%<\/span>;\n}\n\n<span class=\"hljs-selector-tag\">a<\/span><span class=\"hljs-selector-class\">.slide__next<\/span>{\n    <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">rotate<\/span>(-<span class=\"hljs-number\">45deg<\/span>);\n    <span class=\"hljs-attribute\">-webkit-transform<\/span>: <span class=\"hljs-built_in\">rotate<\/span>(-<span class=\"hljs-number\">45deg<\/span>);\n    <span class=\"hljs-attribute\">right<\/span>: <span class=\"hljs-number\">5%<\/span>;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>You can style and position these buttons however you want &#8211; I&#8217;ve chosen to have arrows pointing in each direction. Sometimes the simple option is the best &#8211; but you can make your own choice!<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"step-3---removing-the-scrollbar-with-css\">Step 3 &#8211; Removing the scrollbar with CSS<\/h2>\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.slider<\/span> {\n    <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">600px<\/span>;\n    <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">400px<\/span>;\n    <span class=\"hljs-attribute\">text-align<\/span>: center;\n    <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">20px<\/span>;\n    <span class=\"hljs-attribute\">overflow<\/span>: hidden;\n    <span class=\"hljs-attribute\">position<\/span>: relative;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>&#8230; just add <code>overflow: hidden;<\/code> to <code>.slider<\/code>. This also bring the border radius into play.<\/p>\n\n\n\n<p>That gives us this:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_rNvBZZp\" data-src=\"\/\/codepen.io\/anon\/embed\/rNvBZZp?height=450&amp;theme-id=1&amp;slug-hash=rNvBZZp&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed rNvBZZp\" title=\"CodePen Embed rNvBZZp\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>OK, pretty good &#8211; but ideally we don&#8217;t want the buttons to be locked to each slide. Sliders typically have buttons fixed in place.<\/p>\n\n\n\n<p>But is that possible with CSS?<\/p>\n\n\n\n<p>Why, yes!<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"step-4---fixing-the-navigation-buttons-in-place\">Step 4 &#8211; Fixing the navigation buttons in place<\/h2>\n\n\n<p>We don&#8217;t need to change the HTML for this, but we do need to update our CSS a bit:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.slide<\/span> <span class=\"hljs-selector-tag\">a<\/span> {\n    <span class=\"hljs-attribute\">background<\/span>: none;\n    <span class=\"hljs-attribute\">border<\/span>: none;\n}\n\n<span class=\"hljs-selector-tag\">a<\/span><span class=\"hljs-selector-class\">.slide__prev<\/span>,\n<span class=\"hljs-selector-class\">.slider<\/span><span class=\"hljs-selector-pseudo\">::before<\/span> {\n    <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">rotate<\/span>(<span class=\"hljs-number\">135deg<\/span>);\n    <span class=\"hljs-attribute\">-webkit-transform<\/span>: <span class=\"hljs-built_in\">rotate<\/span>(<span class=\"hljs-number\">135deg<\/span>);\n    <span class=\"hljs-attribute\">left<\/span>: <span class=\"hljs-number\">5%<\/span>;\n}\n\n<span class=\"hljs-selector-tag\">a<\/span><span class=\"hljs-selector-class\">.slide__next<\/span>,\n<span class=\"hljs-selector-class\">.slider<\/span><span class=\"hljs-selector-pseudo\">::after<\/span> {\n    <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">rotate<\/span>(-<span class=\"hljs-number\">45deg<\/span>);\n    <span class=\"hljs-attribute\">-webkit-transform<\/span>: <span class=\"hljs-built_in\">rotate<\/span>(-<span class=\"hljs-number\">45deg<\/span>);\n    <span class=\"hljs-attribute\">right<\/span>: <span class=\"hljs-number\">5%<\/span>;\n}\n\n<span class=\"hljs-selector-class\">.slider<\/span><span class=\"hljs-selector-pseudo\">::before<\/span>,\n<span class=\"hljs-selector-class\">.slider<\/span><span class=\"hljs-selector-pseudo\">::after<\/span>,\n<span class=\"hljs-selector-class\">.slide__prev<\/span>,\n<span class=\"hljs-selector-class\">.slide__next<\/span> {\n    <span class=\"hljs-attribute\">position<\/span>: absolute;\n    <span class=\"hljs-attribute\">top<\/span>: <span class=\"hljs-number\">48%<\/span>;\n    <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">35px<\/span>;\n    <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">35px<\/span>;\n    <span class=\"hljs-attribute\">border<\/span>: solid black;\n    <span class=\"hljs-attribute\">border-width<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">4px<\/span> <span class=\"hljs-number\">4px<\/span> <span class=\"hljs-number\">0<\/span>;\n    <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">3px<\/span>;\n    <span class=\"hljs-attribute\">box-sizing<\/span>: border-box;\n}\n\n<span class=\"hljs-selector-class\">.slider<\/span><span class=\"hljs-selector-pseudo\">::before<\/span>,\n<span class=\"hljs-selector-class\">.slider<\/span><span class=\"hljs-selector-pseudo\">::after<\/span> {\n  <span class=\"hljs-attribute\">content<\/span>: <span class=\"hljs-string\">''<\/span>;\n  <span class=\"hljs-attribute\">z-index<\/span>: <span class=\"hljs-number\">1<\/span>;\n  <span class=\"hljs-attribute\">background<\/span>: none;\n  <span class=\"hljs-attribute\">pointer-events<\/span>: none;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>OK so what&#8217;s going on here? Well first, we&#8217;ve taken the background and border off of the <code>a<\/code> element. This makes our buttons effectively invisible.<\/p>\n\n\n\n<p>Then, we&#8217;ve added <code>before<\/code> and <code>after<\/code> pseudo elements to <code>slider<\/code>. These have the same style that we previously had on the <code>a<\/code> elements &#8211; the nice simple arrow. And we&#8217;ve positioned them <em>exactly<\/em> on top of our now invisible buttons, and set <code>pointer-events<\/code> to <code>none<\/code>.<\/p>\n\n\n\n<p>Because they are attached to the <code>slider<\/code> element and not <code>slide<\/code>, they will remain fixed in place as the user scrolls through the slides. But&#8230; when the user clicks on one, they are <em>actually<\/em> clicking on the invisible button attached to the actual slide.<\/p>\n\n\n\n<p>This gives the illusion of fixed navigation buttons! Nice eh?<\/p>\n\n\n\n<p>It looks like this:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_poVzOxP\" data-src=\"\/\/codepen.io\/anon\/embed\/poVzOxP?height=450&amp;theme-id=1&amp;slug-hash=poVzOxP&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed poVzOxP\" title=\"CodePen Embed poVzOxP\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>OK, now we&#8217;ve got a pretty good, pure CSS slider!<\/p>\n\n\n\n<p>Aha, I hear you say, but what about breadcrumbs, can we add those too?<\/p>\n\n\n\n<p>Glad you asked &#8211; yes we can!<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"step-5---add-breadcrumbs-to-the-slider\">Step 5 &#8211; Add breadcrumbs to the slider<\/h2>\n\n\n<p>To add the breadcrumbs to the slider, we are really using the same techniques we&#8217;ve just been through &#8211; just in a slightly different way.<\/p>\n\n\n\n<p>Each breadcrumb will just be another jump link pointing to the relevant slide, and we&#8217;ll position it absolutely in the <code>slider<\/code> element.<\/p>\n\n\n\n<p>So here&#8217;s the HTML (put this in <code>slider<\/code>, below the <code>slides<\/code> element):<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"slider__nav\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"slider__navlink\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#slides__1\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"slider__navlink\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#slides__2\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"slider__navlink\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#slides__3\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"slider__navlink\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#slides__4\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>See? Same links as we used before. Now to style it:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.slider__nav<\/span> {\n    <span class=\"hljs-attribute\">box-sizing<\/span>: border-box;\n    <span class=\"hljs-attribute\">position<\/span>: absolute;\n    <span class=\"hljs-attribute\">bottom<\/span>: <span class=\"hljs-number\">5%<\/span>;\n    <span class=\"hljs-attribute\">left<\/span>: <span class=\"hljs-number\">50%<\/span>;\n    <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">200px<\/span>;\n    <span class=\"hljs-attribute\">margin-left<\/span>: -<span class=\"hljs-number\">100px<\/span>;\n    <span class=\"hljs-attribute\">text-align<\/span>: center;\n}\n\n<span class=\"hljs-selector-class\">.slider__navlink<\/span> {\n    <span class=\"hljs-attribute\">display<\/span>: inline-block;\n    <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">15px<\/span>;\n    <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">15px<\/span>;\n    <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">50%<\/span>;\n    <span class=\"hljs-attribute\">background-color<\/span>: black;\n    <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">10px<\/span> <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">10px<\/span>;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Again, you are free to style these however your heart desires!<\/p>\n\n\n\n<p>And here is the final result:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_mdLbGab\" data-src=\"\/\/codepen.io\/anon\/embed\/mdLbGab?height=450&amp;theme-id=1&amp;slug-hash=mdLbGab&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed mdLbGab\" title=\"CodePen Embed mdLbGab\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>A pretty cool slider, and no JavaScript in sight. Hope that&#8217;s useful to you!<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\">Conclusion<\/h2>\n\n\n<p>This is a useful trick that lets you create slider functionality &#8211; even for people with JS turned off. But of course, without JS, you&#8217;re really limited in what you&#8217;re able to do and how you can integrate it with your existing site.<\/p>\n\n\n\n<p>\n    <a href=\"https:\/\/alvarotrigo.com\/fullPage\/\">\n        <video width=\"680\" height=\"382\" controls muted autoplay loop playsinline>\n        <source data-src=\"https:\/\/cdn.jsdelivr.net\/gh\/alvarotrigo\/blog-assets\/videos\/fullPage_intro.webm\" type=\"video\/webm\" \/>\n        <source src=\"https:\/\/cdn.jsdelivr.net\/gh\/alvarotrigo\/blog-assets\/videos\/fullPage_intro.mp4\" type=\"video\/mp4\" \/>\n        Your browser does not support the video tag.\n        <\/video>\n    <\/a>\n<\/p>\n\n\n\n<p>If you wanted to harness the power of JS to create beautiful, responsive, full-page sliders, check out <a href=\"https:\/\/alvarotrigo.com\/fullPage\/\">fullPage.js<\/a>. It&#8217;s got slider functionality right out of the box, and includes support for:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Breadcrumb navigation &#8211; which you can move around and style easily<\/li>\n\n\n\n<li>Autoplay &#8211; so your visitors get to see more of your awesome content even if they don&#8217;t click the navigation buttons!<\/li>\n\n\n\n<li>Lazy loading &#8211; speed up your site by only loading assets when needed<\/li>\n\n\n\n<li>Lots, lots more<\/li>\n<\/ul>\n\n\n\n<p>It&#8217;s also super-easy to set up &#8211; so give it a try!<\/p>\n\n\n\n<p>And if you still hungry for sliders, get <a href=\"https:\/\/alvarotrigo.com\/blog\/animated-slider\/\">inspired by this list of amazing animated sliders<\/a>!<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"related-articles\">Related articles<\/h2>\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/javascript-slider-how-to-make-one\/\">How to make a JavaScript Image Slider<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/jquery-carousel\/\">Best jQuery carousel plugins<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/news-slider\/\">News Slider Examples For Inspiration<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/css-alerts\/\">CSS Alerts<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>What? A slider that only uses CSS, and no JS? Pure CSS and no JavaScript? Yes, it is possible &#8211; here&#8217;s how!<\/p>\n","protected":false},"author":6,"featured_media":4878,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[108],"tags":[9,43,17],"class_list":["post-4879","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sliders","tag-css","tag-slider","tag-web"],"acf":[],"_links":{"self":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/4879","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/comments?post=4879"}],"version-history":[{"count":5,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/4879\/revisions"}],"predecessor-version":[{"id":18863,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/4879\/revisions\/18863"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/media\/4878"}],"wp:attachment":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/media?parent=4879"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/categories?post=4879"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/tags?post=4879"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}