How to Create a Fullscreen Image Slider with Pure CSS

Fullscreen sliders are very trendy, and there are lots of cool examples all over the internet. Many of them are created with JavaScript, but we can create a nice slider with just using HTML and CSS. Let’s see how to create a cool and easy fullscreen slider with a bunch of CSS properties.

Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Create HTML

Use an <input> element with the type attribute to create a radio button. Also, add the id and name attributes.
Use a <label> element with a for attribute.
Use a <div> element with a class name.

<input type="radio" id="trigger1" name="slider" checked autofocus>
<label for="trigger1"></label>
<div class="slide n1"></div>

Add CSS

Specify the padding, margin, width, height of the container and then, set the text-align property to "center" and the overflow to "hidden".
Add images wiith the background-image property.
Style the <input> with the position, opacity, cursor and margin-top properties.

body,
html {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  overflow: hidden;
}
.n1 {
  background-image: url("https://images.unsplash.com/photo-1491438590914-bc09fcaaf77a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80");
}
.n2 {
  background-image: url("https://images.unsplash.com/photo-1556159992-e189f8e50104?ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80");
}
.n3 {
  background-image: url("https://images.unsplash.com/photo-1511988617509-a57c8a288659?ixlib=rb-1.2.1&auto=format&fit=crop&w=751&q=80");
}
.n4 {
  background-image: url("https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&auto=format&fit=crop&w=751&q=80");
}
.n5 {
  background-image: url("https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80");
}
input {
  position: absolute;
  opacity: 0;
  margin-top: 90%;
  cursor: pointer;
}

Make the <label> an inline-block element with the display property and continue styling it with the height, width, margin, border, border-radius, background-color, and other properties. Specify how long the transition animation should take with the transition-duration property.
Style the "slide" class. Translate the element along the X axis with the transform property.
Set a white background-color for the checked <input> and <label> elements.
Set a box-shadow for <label> elements.
Translate the checked input and successive "slide" class along the x-axis with the transform property.

label {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: solid 2px white;
  border-radius: 999px;
  background-color: transparent;
  margin: 95vh 6px 0 6px;
  z-index: 2;
  cursor: pointer;
  transition-duration: .4s;
}
.slide {
  position: absolute;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  transform: translateX(-100%);
  transition-duration: .4s;
  opacity: 1;
}
input:checked+label {
  background-color: #ffffff;
}
input:focus+label {
  box-shadow: 0 0 0 2px #cccccc, 0 0 18px #fffffff;
}
input:checked~.slide {
  transform: translateX(100%);
}
input:checked+label+.slide {
  transform: translateX(0);
  opacity: 1;
}

Let’s see the final result of the fullscreen image slider with CSS.

Example of creating a horizontal fullscreen image slider:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body,
      html {
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        overflow: hidden;
      }
      .n1 {
        background-image: url("https://images.unsplash.com/photo-1491438590914-bc09fcaaf77a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80");
      }
      .n2 {
        background-image: url("https://images.unsplash.com/photo-1556159992-e189f8e50104?ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80");
      }
      .n3 {
        background-image: url("https://images.unsplash.com/photo-1511988617509-a57c8a288659?ixlib=rb-1.2.1&auto=format&fit=crop&w=751&q=80");
      }
      .n4 {
        background-image: url("https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&auto=format&fit=crop&w=751&q=80");
      }
      .n5 {
        background-image: url("https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80");
      }
      input {
        position: absolute;
        opacity: 0;
        margin-top: 90%;
        cursor: pointer;
      }
      label {
        display: inline-block;
        width: 12px;
        height: 12px;
        border: solid 2px white;
        border-radius: 999px;
        background-color: transparent;
        margin: 95vh 6px 0 6px;
        z-index: 2;
        cursor: pointer;
        transition-duration: .4s;
      }
      .slide {
        position: absolute;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: -1;
        transform: translateX(-100%);
        transition-duration: .4s;
        opacity: 1;
      }
      input:checked + label {
        background-color: #ffffff;
      }
      input:focus + label {
        box-shadow: 0 0 0 2px #cccccc, 0 0 18px #fffffff;
      }
      input:checked ~ .slide {
        transform: translateX(100%);
      }
      input:checked + label + .slide {
        transform: translateX(0);
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <input type="radio" id="trigger1" name="slider" checked autofocus>
    <label for="trigger1"></label>
    <div class="slide n1"></div>
    <input type="radio" id="trigger2" name="slider">
    <label for="trigger2"></label>
    <div class="slide n2"></div>
    <input type="radio" id="trigger3" name="slider">
    <label for="trigger3"></label>
    <div class="slide n3"></div>
    <input type="radio" id="trigger4" name="slider">
    <label for="trigger4"></label>
    <div class="slide n4"></div>
    <input type="radio" id="trigger5" name="slider">
    <label for="trigger5"></label>
    <div class="slide n5"></div>
  </body>
</html>

Try it Yourself »

Example of creating a vertical fullscreen image slider:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html,
      body {
        height: 100%;
      }
      body {
        overflow: hidden;
        color: white;
      }
      .nav {
        position: fixed;
        z-index: 2;
        right: 30px;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
      }
      .nav-item {
        width: 10px;
        height: 10px;
        display: block;
        margin: 12px auto;
        border: solid 2px #ffffff;
        border-radius: 50%;
        cursor: pointer;
      }
      .nav-item:hover {
        background-color: #ffffff;
      }
      section {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        transition-delay: 0.5s;
      }
      .cover {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
      }
      h2 {
        font-size: 80px;
        text-align: center;
      }
      section:nth-of-type(1) {
        background: #00c1c4;
      }
      section:nth-of-type(2) {
        background: #9d7bc9;
      }
      section:nth-of-type(3) {
        background: #87b827;
      }
      section:nth-of-type(4) {
        background: #fa89a9;
      }
      input[type='radio'] {
        display: none;
      }
      input[type='radio']#section1:checked ~ nav label[for='section1'] {
        background-color: #fff;
      }
      input[type='radio']#section1:checked ~ section:nth-of-type(1) {
        z-index: 1;
        top: 0;
        transition: top 0.5s ease-in-out;
        transition-delay: 0s;
      }
      input[type='radio']#section1:checked ~ .cover {
        background-color: #00c1c4;
      }
      input[type='radio']#section2:checked ~ nav label[for='section2'] {
        background-color: white;
      }
      input[type='radio']#section2:checked ~ section:nth-of-type(2) {
        z-index: 1;
        top: 0;
        transition: top 0.5s ease-in-out;
        transition-delay: 0s;
      }
      input[type='radio']#section2:checked ~ .cover {
        background-color: #9d7bc9;
      }
      input[type='radio']#section3:checked ~ nav label[for='section3'] {
        background-color: white;
      }
      input[type='radio']#section3:checked ~ section:nth-of-type(3) {
        z-index: 1;
        top: 0;
        transition: top 0.5s ease-in-out;
        transition-delay: 0s;
      }
      input[type='radio']#section3:checked ~ .cover {
        background-color: #87b827;
      }
      input[type='radio']#section4:checked ~ nav label[for='section4'] {
        background-color: white;
      }
      input[type='radio']#section4:checked ~ section:nth-of-type(4) {
        z-index: 1;
        top: 0;
        transition: top 0.5s ease-in-out;
        transition-delay: 0s;
      }
      input[type='radio']#section4:checked ~ .cover {
        background-color: #fa89a9;
      }
    </style>
  </head>
  <body>
    <input type="radio" name="item" checked="checked" id="section1" />
    <input type="radio" name="item" id="section2" />
    <input type="radio" name="item" id="section3" />
    <input type="radio" name="item" id="section4" />
    <nav class="nav">
      <label class="nav-item" for="section1"></label>
      <label class="nav-item" for="section2"></label>
      <label class="nav-item" for="section3"></label>
      <label class="nav-item" for="section4"></label>
    </nav>
    <section>
      <h2>Page 1</h2>
    </section>
    <section>
      <h2>Page 2</h2>
    </section>
    <section>
      <h2>Page 3</h2>
    </section>
    <section>
      <h2>Page 4</h2>
    </section>
    <div class="cover"></div>
  </body>
</html>