Shuffling Card Carousel In Pure CSS

Preview:

Description:

A modern, responsive shuffling card carousel component built using radio button, label element, HTML list and CSS/CSS3.

How to use it:

1. Build the HTML structure for the carousel.

<section class="carousel-section">
  <ul class="carousel my-carousel carousel--thumb">
    <input class="carousel__thumb" type="radio" id="1" name="thumb" checked="checked" />
    <input class="carousel__thumb" type="radio" id="2" name="thumb" />
    <input class="carousel__thumb" type="radio" id="3" name="thumb" />
    <input class="carousel__thumb" type="radio" id="4" name="thumb" />
    <input class="carousel__thumb" type="radio" id="5" name="thumb" />
    <div class="carousel__controls">
      <label
        class="carousel__control carousel__control--backward"
        for="5"
      ></label>
      <label
        class="carousel__control carousel__control--forward"
        for="2"
      ></label>
    </div>
    <div class="carousel__controls">
      <label
        class="carousel__control carousel__control--backward"
        for="1"
      ></label>
      <label
        class="carousel__control carousel__control--forward"
        for="3"
      ></label>
    </div>
    <div class="carousel__controls">
      <label
        class="carousel__control carousel__control--backward"
        for="2"
      ></label>
      <label
        class="carousel__control carousel__control--forward"
        for="4"
      ></label>
    </div>
    <div class="carousel__controls">
      <label
        class="carousel__control carousel__control--backward"
        for="3"
      ></label>
      <label
        class="carousel__control carousel__control--forward"
        for="5"
      ></label>
    </div>
    <div class="carousel__controls">
      <label
        class="carousel__control carousel__control--backward"
        for="4"
      ></label>
      <label
        class="carousel__control carousel__control--forward"
        for="1"
      ></label>
    </div>
    <div class="carousel__track">
      <li class="carousel__slide">
        <h2>1</h2>
      </li>
      <li class="carousel__slide">
        <h2>2</h2>
      </li>
      <li class="carousel__slide">
        <h2>3</h2>
      </li>
      <li class="carousel__slide">
        <h2>4</h2>
      </li>
      <li class="carousel__slide">
        <h2>5</h2>
      </li>
    </div>
    <div class="carousel__indicators">
      <label class="carousel__indicator" for="1"></label>
      <label class="carousel__indicator" for="2"></label>
      <label class="carousel__indicator" for="3"></label>
      <label class="carousel__indicator" for="4"></label>
      <label class="carousel__indicator" for="5"></label>
    </div>
  </ul>
</section>

2. The core CSS styles for the carousel.

.carousel-section {
  position: relative;
  margin-top: 130px;
  margin-bottom: 80px;
  z-index: 1; 
}
@media screen and (min-width: 1600px) {
  .carousel-section {
    margin-top: 150px; 
  } 
}
@media screen and (max-width: 670px) {
  .carousel-section {
    margin-top: 80px; 
  } 
}
@media screen and (max-width: 390px) {
  .carousel-section {
    margin-top: 40px; 
  } 
}
.carousel {
  height: 300px;
  width: 450px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  padding: 0;
  list-style: none;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover; 
}
@media screen and (min-width: 1600px) {
  .carousel {
    height: 400px;
    width: 550px; 
  } 
}
@media screen and (max-width: 600px) {
  .carousel {
    width: 320px;
    height: 250px; 
  } 
}
.carousel__controls,
.carousel__thumb {
  display: none; 
}
.carousel__control {
  height: 30px;
  width: 30px;
  margin-top: -15px;
  top: -28%;
  position: absolute;
  display: block;
  cursor: pointer;
  border-width: 2px 2px 0 0;
  border-style: solid;
  border-color: black;
  outline: 0;
  z-index: 3;
  -webkit-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  transition: all 0.2s ease; 
}
@media screen and (min-width: 1600px) {
  .carousel__control {
    top: -25%; 
  } 
}
@media screen and (max-width: 670px) {
  .carousel__control {
    top: -46%; 
  } 
}
@media screen and (max-width: 390px) {
  .carousel__control {
    top: -40%; 
  } 
}
.carousel__control:hover {
  border-width: 4px 4px 0 0;
  height: 35px;
  width: 35px; 
}
.carousel__control--backward {
  left: -100px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg); 
}
@media screen and (max-width: 670px) {
  .carousel__control--backward {
    left: 20px; 
  } 
}
@media screen and (max-width: 519px) {
  .carousel__control--backward {
    left: 0; 
  } 
}
@media screen and (max-width: 325px) {
  .carousel__control--backward {
    left: 9px; 
  } 
}
.carousel__control--forward {
  right: -100px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg); 
}
@media screen and (max-width: 670px) {
  .carousel__control--forward {
    right: 20px; 
  } 
}
@media screen and (max-width: 519px) {
  .carousel__control--forward {
    right: 0; 
  } 
}
@media screen and (max-width: 325px) {
  .carousel__control--forward {
    right: 9px; 
  } 
}
.carousel__track {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0;
  margin: 0; 
}
.carousel__track .carousel__slide {
  display: block;
  top: 0;
  left: 0;
  right: 0;
  opacity: 1;
  transition: -webkit-transform 0.5s ease 0s;
  -webkit-transition: -webkit-transform 0.5s ease 0s;
  -o-transition: -o-transform 0.5s ease 0s;
  -moz-transition: transform 0.5s ease 0s, -moz-transform 0.5s ease 0s;
  transition: transform 0.5s ease 0s;
  transition: transform 0.5s ease 0s, -webkit-transform 0.5s ease 0s, -moz-transform 0.5s ease 0s, -o-transform 0.5s ease 0s;
  transition: transform 0.5s ease 0s, -webkit-transform 0.5s ease 0s; 
}
.carousel__slide {
  height: 100%;
  position: absolute;
  overflow-y: auto;
  overflow: hidden;
  -webkit-box-shadow: 0 30px 33px -25px black;
  -moz-box-shadow: 0 30px 33px -25px black;
  box-shadow: 0 30px 33px -25px black; 
}
.carousel__thumb:checked ~ .carousel__slide {
  top: 0;
  left: 0;
  right: 0; 
}
.carousel__indicators {
  position: absolute;
  bottom: -60px;
  width: 100%;
  text-align: center;
  z-index: 2; 
}
@media screen and (min-width: 1600px) {
  .carousel__indicators {
    bottom: -70px; 
  } 
}
.carousel__indicator {
  height: 35px;
  width: 35px;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  display: inline-block;
  z-index: 2;
  cursor: pointer;
  opacity: 0.35;
  margin: 0 2.5px 0 2.5px;
  -webkit-box-shadow: 0 10px 15px -7px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 0 10px 15px -7px rgba(0, 0, 0, 0.7);
  box-shadow: 0 10px 15px -7px rgba(0, 0, 0, 0.7); 
}
.carousel__indicator:hover {
  opacity: 0.75; 
}

3. Insert content to the slides.

/**
------- FIRST SLIDE
**/
.carousel__thumb:nth-of-type(1):checked ~ .carousel__controls:nth-of-type(1) {
  display: block; 
}
.carousel__slide:nth-of-type(1),
.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(1) {
  background-image: url(../img/slider1.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  background-position: center; 
}
.carousel__thumb:nth-of-type(1):checked
~ .carousel__track
.carousel__slide:nth-of-type(5) {
  -webkit-transform: translateX(-105%);
  -moz-transform: translateX(-105%);
  -ms-transform: translateX(-105%);
  -o-transform: translateX(-105%);
  transform: translateX(-105%); 
}
.carousel__thumb:nth-of-type(1):checked
~ .carousel__track
.carousel__slide:nth-of-type(2) {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none; 
}
.carousel__thumb:nth-of-type(1):checked
~ .carousel__track
.carousel__slide:nth-of-type(1) h2 {
  color: #f7f3ea;
  font-size: 200px; 
}
.carousel__thumb:nth-of-type(1):checked
~ .carousel__indicators
.carousel__indicator:nth-of-type(1) {
  opacity: 1; 
}
.carousel__track .carousel__slide:nth-of-type(1) {
  -webkit-transform: translateX(0%);
  -moz-transform: translateX(0%);
  -ms-transform: translateX(0%);
  -o-transform: translateX(0%);
  transform: translateX(0%);
  z-index: -2; 
}
/**
------- SECOND SLIDE
**/
.carousel__thumb:nth-of-type(2):checked ~ .carousel__controls:nth-of-type(2) {
  display: block; 
}
.carousel__slide:nth-of-type(2),
.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(2) {
  background-image: url(../img/slider2.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  background-position: center; 
}
.carousel__track .carousel__slide:nth-of-type(2) {
  -webkit-transform: translateX(105%);
  -moz-transform: translateX(105%);
  -ms-transform: translateX(105%);
  -o-transform: translateX(105%);
  transform: translateX(105%); 
}
.carousel__thumb:nth-of-type(2):checked
~ .carousel__track
.carousel__slide:nth-of-type(2) {
  -webkit-transform: translateX(0%);
  -moz-transform: translateX(0%);
  -ms-transform: translateX(0%);
  -o-transform: translateX(0%);
  transform: translateX(0%); 
}
.carousel__thumb:nth-of-type(2):checked
~ .carousel__track
.carousel__slide:nth-of-type(2) h2 {
  color: #f7f3ea;
  font-size: 200px; 
}
.carousel__thumb:nth-of-type(2):checked
~ .carousel__track
.carousel__slide:nth-of-type(5) {
  -webkit-transform: translateX(105%);
  -moz-transform: translateX(105%);
  -ms-transform: translateX(105%);
  -o-transform: translateX(105%);
  transform: translateX(105%);
  z-index: -2; 
}
.carousel__thumb:nth-of-type(2):checked
~ .carousel__track
.carousel__slide:nth-of-type(1) {
  -webkit-transform: translateX(-105%);
  -moz-transform: translateX(-105%);
  -ms-transform: translateX(-105%);
  -o-transform: translateX(-105%);
  transform: translateX(-105%); 
}
.carousel__thumb:nth-of-type(2):checked
~ .carousel__track
.carousel__slide:nth-of-type(3) {
  -webkit-transform: translateX(105%);
  -moz-transform: translateX(105%);
  -ms-transform: translateX(105%);
  -o-transform: translateX(105%);
  transform: translateX(105%);
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none; 
}
.carousel__thumb:nth-of-type(2):checked
~ .carousel__track
.carousel__slide:nth-of-type(4) {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none; 
}
.carousel__thumb:nth-of-type(2):checked
~ .carousel__indicators
.carousel__indicator:nth-of-type(2) {
  opacity: 1; 
}
.carousel__track .carousel__slide:nth-of-type(2) {
  -webkit-transform: translateX(105%);
  -moz-transform: translateX(105%);
  -ms-transform: translateX(105%);
  -o-transform: translateX(105%);
  transform: translateX(105%); 
}
/**
  ------- THIRD SLIDE
**/
.carousel__thumb:nth-of-type(3):checked ~ .carousel__controls:nth-of-type(3) {
  display: block; 
}
.carousel__slide:nth-of-type(3),
.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(3) {
  background-image: url(../img/slider3.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  background-position: center;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none; 
}
.carousel__thumb:nth-of-type(3):checked
~ .carousel__track
.carousel__slide:nth-of-type(3) {
  -webkit-transform: translateX(0%);
  -moz-transform: translateX(0%);
  -ms-transform: translateX(0%);
  -o-transform: translateX(0%);
  transform: translateX(0%); 
}
.carousel__thumb:nth-of-type(3):checked
~ .carousel__track
.carousel__slide:nth-of-type(3) h2 {
  color: #f7f3ea;
  font-size: 200px; 
}
.carousel__thumb:nth-of-type(3):checked
~ .carousel__track
.carousel__slide:nth-of-type(2) {
  -webkit-transform: translateX(-105%);
  -moz-transform: translateX(-105%);
  -ms-transform: translateX(-105%);
  -o-transform: translateX(-105%);
  transform: translateX(-105%);
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none; 
}
.carousel__thumb:nth-of-type(3):checked
~ .carousel__track
.carousel__slide:nth-of-type(4) {
  -webkit-transform: translateX(105%);
  -moz-transform: translateX(105%);
  -ms-transform: translateX(105%);
  -o-transform: translateX(105%);
  transform: translateX(105%); 
}
.carousel__thumb:nth-of-type(3):checked
~ .carousel__indicators
.carousel__indicator:nth-of-type(3) {
  opacity: 1; 
}
.carousel__track .carousel__slide:nth-of-type(3) {
  -webkit-transform: translateX(-105%);
  -moz-transform: translateX(-105%);
  -ms-transform: translateX(-105%);
  -o-transform: translateX(-105%);
  transform: translateX(-105%);
  z-index: -1; 
}
/**
------- FOURTH SLIDE
**/
.carousel__thumb:nth-of-type(4):checked ~ .carousel__controls:nth-of-type(4) {
  display: block; }
.carousel__slide:nth-of-type(4),
.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(4) {
  background-image: url(../img/slider4.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  background-position: center; 
}
.carousel__thumb:nth-of-type(4):checked
~ .carousel__track
.carousel__slide:nth-of-type(4) {
  -webkit-transform: translateX(0%);
  -moz-transform: translateX(0%);
  -ms-transform: translateX(0%);
  -o-transform: translateX(0%);
  transform: translateX(0%);
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none; 
}
.carousel__thumb:nth-of-type(4):checked
~ .carousel__track
.carousel__slide:nth-of-type(4) h2 {
  color: #f7f3ea;
  font-size: 200px; 
}
.carousel__thumb:nth-of-type(4):checked
~ .carousel__track
.carousel__slide:nth-of-type(5) {
  -webkit-transform: translateX(105%);
  -moz-transform: translateX(105%);
  -ms-transform: translateX(105%);
  -o-transform: translateX(105%);
  transform: translateX(105%);
  z-index: 1;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none; 
}
.carousel__thumb:nth-of-type(4):checked
~ .carousel__track
.carousel__slide:nth-of-type(3) {
  -webkit-transform: translateX(-105%);
  -moz-transform: translateX(-105%);
  -ms-transform: translateX(-105%);
  -o-transform: translateX(-105%);
  transform: translateX(-105%);
  -webkit-box-shadow: 0 30px 33px -25px black;
  -moz-box-shadow: 0 30px 33px -25px black;
  box-shadow: 0 30px 33px -25px black; 
}
.carousel__thumb:nth-of-type(4):checked
~ .carousel__indicators
.carousel__indicator:nth-of-type(4) {
  opacity: 1; 
}
.carousel__track .carousel__slide:nth-of-type(4) {
  -webkit-transform: translateX(105%);
  -moz-transform: translateX(105%);
  -ms-transform: translateX(105%);
  -o-transform: translateX(105%);
  transform: translateX(105%);
  z-index: -2; 
}
/**
  ------- FIFTH SLIDE
**/
.carousel__thumb:nth-of-type(5):checked ~ .carousel__controls:nth-of-type(5) {
  display: block; 
}
.carousel__slide:nth-of-type(5),
.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(5) {
  background-image: url(../img/slider5.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  background-position: center; 
}
.carousel__thumb:nth-of-type(5):checked
~ .carousel__track
.carousel__slide:nth-of-type(5) {
  -webkit-transform: translateX(0%);
  -moz-transform: translateX(0%);
  -ms-transform: translateX(0%);
  -o-transform: translateX(0%);
  transform: translateX(0%);
  z-index: 1;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none; 
}
.carousel__thumb:nth-of-type(5):checked
~ .carousel__track
.carousel__slide:nth-of-type(5) h2 {
  color: #f7f3ea;
  font-size: 200px; 
}
.carousel__thumb:nth-of-type(5):checked
~ .carousel__track
.carousel__slide:nth-of-type(4) {
  -webkit-transform: translateX(-105%);
  -moz-transform: translateX(-105%);
  -ms-transform: translateX(-105%);
  -o-transform: translateX(-105%);
  transform: translateX(-105%); }
.carousel__thumb:nth-of-type(5):checked
~ .carousel__track
.carousel__slide:nth-of-type(1) {
  -webkit-transform: translateX(105%);
  -moz-transform: translateX(105%);
  -ms-transform: translateX(105%);
  -o-transform: translateX(105%);
  transform: translateX(105%); }
.carousel__thumb:nth-of-type(5):checked
~ .carousel__track
.carousel__slide:nth-of-type(2) {
  -webkit-transform: translateX(0%);
  -moz-transform: translateX(0%);
  -ms-transform: translateX(0%);
  -o-transform: translateX(0%);
  transform: translateX(0%); }
.carousel__thumb:nth-of-type(5):checked
~ .carousel__track
.carousel__slide:nth-of-type(3) {
  -webkit-transform: translateX(0%);
  -moz-transform: translateX(0%);
  -ms-transform: translateX(0%);
  -o-transform: translateX(0%);
  transform: translateX(0%); }
.carousel__thumb:nth-of-type(5):checked
~ .carousel__indicators
.carousel__indicator:nth-of-type(5) {
  opacity: 1; 
}
.carousel__track .carousel__slide:nth-of-type(5) {
  -webkit-transform: translateX(-105%);
  -moz-transform: translateX(-105%);
  -ms-transform: translateX(-105%);
  -o-transform: translateX(-105%);
  transform: translateX(-105%);
  z-index: -1; 
}