How to create fullscreen slider with just using CSS

Source Code: (back to article)

Result: Report an issue

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

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