CSS Comments' Slider

No JS.

by MrStan1slav

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet">
<div id="commentsBlock">
<input type="radio" name="radio" id="radio1" checked>
<input type="radio" name="radio" id="radio2">
<input type="radio" name="radio" id="radio3">
<input type="radio" name="radio" id="radio4">

<label for="radio1"><i class="fas fa-angle-left"></i></label>
<label for="radio2"><i class="fas fa-angle-left"></i></label>
<label for="radio3"><i class="fas fa-angle-left"></i></label>
<label for="radio4"><i class="fas fa-angle-left"></i></label>
  <div id="iconBlock">
    <i class="fas fa-comment-alt"></i>
  </div>
  <div id="textBlockWrapper">

  <div id="block1" class="textBlock">
  <span class="textComment">1st Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero reiciendis minus, ipsam sed numquam! Harum, deleniti quisquam quidem omnis mollitia.</span>
  <div class="author">
  John Doe
  </div>
  </div>
  <div id="block2" class="textBlock">
  <span class="textComment">2nd Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quo explicabo, sit, voluptas autem repellat quis asperiores nisi soluta quisquam.</span>
  <div class="author">
  Mark Twain
  </div>
  </div>
  <div id="block3" class="textBlock">
  <span class="textComment">3rd Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis rem, vel sint tempora quod impedit cupiditate velit optio aliquam voluptatibus.</span>
  <div class="author">
  Jack Brown
  </div>
  </div>
  <div id="block4" class="textBlock">
  <span class="textComment">4th Good CSS slider, innit? amet, consectetur adipisicing elit. Ratione placeat neque nulla deleniti blanditiis nihil temporibus quam minima ducimus.</span>
  <div class="author">
  MrStan1slav
  </div>
  </div>

  </div>
</div>

CSS

* {
  box-sizing:border-box;
}
body {
  margin:0;
  padding:0;
  background:#eee;
}
#commentsBlock {
  display:flex;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}
input[name="radio"] {
  display:none;
}
label[for*="radio"] {
  position:absolute;
  top:50%;
  left:0px;
  transform:translateY(-50%);
  opacity:0;
  visibility:hidden;
  cursor:pointer;
}
#radio1:checked ~ label[for="radio4"],
#radio2:checked ~ label[for="radio1"],
#radio3:checked ~ label[for="radio2"],
#radio4:checked ~ label[for="radio3"] {
  left:-50px;
  transform:translateY(-50%);
  opacity:1;
  visibility:visible;
}

#radio1:checked ~ label[for="radio2"],
#radio2:checked ~ label[for="radio3"],
#radio3:checked ~ label[for="radio4"],
#radio4:checked ~ label[for="radio1"] {
  right:-50px;
  transform:translateY(-50%) rotate(180deg);
  opacity:1;
  visibility:visible;
}
#radio1:checked ~ #textBlockWrapper #block1,
#radio2:checked ~ #textBlockWrapper #block2,
#radio3:checked ~ #textBlockWrapper #block3,
#radio4:checked ~ #textBlockWrapper #block4 {
  opacity:1;
  visibility:visible;
}

#iconBlock {
  position:relative;
  width:80px;
  height:80px;
}
.fa-comment-alt {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  font-size:40px;
  color:#94E0D3;
  padding:20px;
  border:3px solid #94E0D3;
}
#textBlockWrapper {
  width:350px;
  height:80px;
  margin-left:30px;
}
.textBlock {
  width:inherit;
  height:inherit;
  transition:opacity .7s;
}
#block1, #block2, #block3, #block4 {
  position:absolute;
  opacity:0;
  visibility:hidden;
}
.textComment {
  font-size:14px;
  font-family:Arial;
  font-style:italic;
  color:#444;
}
.textComment:before {
  content:"\201c";
}
.textComment:after {
  content:"\201d";
}
.author {
  font-family:Courgette;
}
.author:before {
  display:inline-block;
  content:"";
  margin-left:4px;
  width:40px;
  height:2px;
  background:coral;
  vertical-align:middle;
}