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.

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.

How to create <input>, <label>, <div> elements

html

<input type="radio" id="trigger1" name="slider" checked />
<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 with the background-image property.
Style the <input> with the position, opacity, cursor and margin-top properties.

How to set the transform property for checked element and "slide" class

css

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.

How to set the transform and opacity properties for checked element, <label> and "slide" class

css

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 #ffffff;
}
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:

Creating fullscreen image slider with pure CSS

html

<!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 #ffffff;
      }
      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 />
    <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>

Example of creating a vertical fullscreen image slider:

How to create fullscreen slider with just using CSS

html

<!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>

How to Create a Fullscreen Image Slider with Pure CSS ​

Create HTML ​

Add CSS ​

Example of creating a horizontal fullscreen image slider: ​

Example of creating a vertical fullscreen image slider: ​

How to Create a Fullscreen Image Slider with Pure CSS

Create HTML

Add CSS

Example of creating a horizontal fullscreen image slider:

Example of creating a vertical fullscreen image slider: