W3docs
en
Log in

How to Create a Fullscreen Image Slider with Pure CSS

Creating a fullscreen slider is an easy thing to do with the help of HTML and CSS properties. Read the tutorial and create your own cool fullscreen slider easily.

Tags

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 <span class="attribute">type</span> attribute to create a radio button. Also, add the <span class="attribute">id</span> and <span class="attribute">name</span> attributes.
  • Use a <label> element with a <span class="attribute">for</span> attribute.
  • Use a <div> element with a <span class="attribute">class</span> name.

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

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

Add CSS

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

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 <span class="property"> XFI5 </span> an inline-block element with the display property and continue styling it with the <span class="property">height</span>, <span class="property">width</span>, <span class="property">margin</span>, 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 <span class="property">background-color</span> for the checked <span class="property"> XFI6 </span> and <span class="property"> XFI7 </span> elements.
  • Set a box-shadow for <span class="property"> XFI8 </span> elements.
  • Translate the checked input and successive "slide" class along the x-axis with the <span class="property">transform</span> property.

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

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

<!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>
Try it Yourself »

Example of creating a vertical fullscreen image slider:

How to create fullscreen slider with just using CSS

<!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>
Try it Yourself »