1

I'm building a slider and I want to avoid jQuery.
So I'm trying to convert some jQuery code to vanilla JavaScript.

Here's the jQuery:

setInterval(function() {
  var $curr = $('#slider1 input[type=radio]:checked');  
  var $next = $curr.next('input');
  if(!$next.length) $next = $('#slider1 input[type=radio]').first();
  $next.prop('checked', true);

}, 2000);

My code is below, but it's not working.
What's going wrong?

setInterval(() => {
  let $curr = document.querySelectorAll('#slider1 input[type=radio]:checked'),
    $next = $curr.nextSibling;

  if (!$next.length) {
    $next = document.querySelectorAll('#slider1 input[type=radio]').firstChild;
  }
  $next.setAttribute('checked', true);
}, 3000);
.csslider {
  -moz-perspective: 1300px;
  -ms-perspective: 1300px;
  -webkit-perspective: 1300px;
  perspective: 1300px;
  display: inline-block;
  text-align: left;
  position: relative;
  margin-bottom: 22px;
}

.csslider>input {
  display: none;
}

.csslider>input:nth-of-type(10):checked~ul li:first-of-type {
  margin-left: -900%;
}

.csslider>input:nth-of-type(9):checked~ul li:first-of-type {
  margin-left: -800%;
}

.csslider>input:nth-of-type(8):checked~ul li:first-of-type {
  margin-left: -700%;
}

.csslider>input:nth-of-type(7):checked~ul li:first-of-type {
  margin-left: -600%;
}

.csslider>input:nth-of-type(6):checked~ul li:first-of-type {
  margin-left: -500%;
}

.csslider>input:nth-of-type(5):checked~ul li:first-of-type {
  margin-left: -400%;
}

.csslider>input:nth-of-type(4):checked~ul li:first-of-type {
  margin-left: -300%;
}

.csslider>input:nth-of-type(3):checked~ul li:first-of-type {
  margin-left: -200%;
}

.csslider>input:nth-of-type(2):checked~ul li:first-of-type {
  margin-left: -100%;
}

.csslider>input:nth-of-type(1):checked~ul li:first-of-type {
  margin-left: 0%;
}

.csslider>ul {
  position: relative;
  width: 820px;
  height: 420px;
  z-index: 1;
  font-size: 0;
  line-height: 0;
  background-color: #3A3A3A;
  border: 10px solid #3A3A3A;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.csslider>ul>li {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 15px;
  font-size: initial;
  line-height: normal;
  -moz-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
  transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
  vertical-align: top;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  white-space: normal;
}

.csslider>ul>li.scrollable {
  overflow-y: scroll;
}

.csslider>.navigation {
  position: absolute;
  bottom: -8px;
  left: 50%;
  z-index: 10;
  margin-bottom: -10px;
  font-size: 0;
  line-height: 0;
  text-align: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.csslider>.navigation>div {
  margin-left: -100%;
}

.csslider>.navigation label {
  position: relative;
  display: inline-block;
  cursor: pointer;
  border-radius: 50%;
  margin: 0 4px;
  padding: 4px;
  background: #3A3A3A;
}

.csslider>.navigation label:hover:after {
  opacity: 1;
}

.csslider>.navigation label:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -6px;
  margin-top: -6px;
  background: #71ad37;
  border-radius: 50%;
  padding: 6px;
  opacity: 0;
}

.csslider>.arrows {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.csslider.inside .navigation {
  bottom: 10px;
  margin-bottom: 10px;
}

.csslider.inside .navigation label {
  border: 1px solid #7e7e7e;
}

.csslider>input:nth-of-type(1):checked~.navigation label:nth-of-type(1):after,
.csslider>input:nth-of-type(2):checked~.navigation label:nth-of-type(2):after,
.csslider>input:nth-of-type(3):checked~.navigation label:nth-of-type(3):after,
.csslider>input:nth-of-type(4):checked~.navigation label:nth-of-type(4):after,
.csslider>input:nth-of-type(5):checked~.navigation label:nth-of-type(5):after,
.csslider>input:nth-of-type(6):checked~.navigation label:nth-of-type(6):after,
.csslider>input:nth-of-type(7):checked~.navigation label:nth-of-type(7):after,
.csslider>input:nth-of-type(8):checked~.navigation label:nth-of-type(8):after,
.csslider>input:nth-of-type(9):checked~.navigation label:nth-of-type(9):after,
.csslider>input:nth-of-type(10):checked~.navigation label:nth-of-type(10):after,
.csslider>input:nth-of-type(11):checked~.navigation label:nth-of-type(11):after {
  opacity: 1;
}

.csslider>.arrows {
  position: absolute;
  left: -31px;
  top: 50%;
  width: 100%;
  height: 26px;
  padding: 0 31px;
  z-index: 0;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

.csslider>.arrows label {
  display: none;
  position: absolute;
  top: -50%;
  padding: 13px;
  box-shadow: inset 2px -2px 0 1px #3A3A3A;
  cursor: pointer;
  -moz-transition: box-shadow 0.15s, margin 0.15s;
  -o-transition: box-shadow 0.15s, margin 0.15s;
  -webkit-transition: box-shadow 0.15s, margin 0.15s;
  transition: box-shadow 0.15s, margin 0.15s;
}

.csslider>.arrows label:hover {
  box-shadow: inset 3px -3px 0 2px #71ad37;
  margin: 0 0px;
}

.csslider>.arrows label:before {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  height: 300%;
  width: 300%;
}

.csslider.infinity>input:first-of-type:checked~.arrows label.goto-last,
.csslider>input:nth-of-type(1):checked~.arrows>label:nth-of-type(0),
.csslider>input:nth-of-type(2):checked~.arrows>label:nth-of-type(1),
.csslider>input:nth-of-type(3):checked~.arrows>label:nth-of-type(2),
.csslider>input:nth-of-type(4):checked~.arrows>label:nth-of-type(3),
.csslider>input:nth-of-type(5):checked~.arrows>label:nth-of-type(4),
.csslider>input:nth-of-type(6):checked~.arrows>label:nth-of-type(5),
.csslider>input:nth-of-type(7):checked~.arrows>label:nth-of-type(6),
.csslider>input:nth-of-type(8):checked~.arrows>label:nth-of-type(7),
.csslider>input:nth-of-type(9):checked~.arrows>label:nth-of-type(8),
.csslider>input:nth-of-type(10):checked~.arrows>label:nth-of-type(9),
.csslider>input:nth-of-type(11):checked~.arrows>label:nth-of-type(10) {
  display: block;
  left: 0;
  right: auto;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.csslider.infinity>input:last-of-type:checked~.arrows label.goto-first,
.csslider>input:nth-of-type(1):checked~.arrows>label:nth-of-type(2),
.csslider>input:nth-of-type(2):checked~.arrows>label:nth-of-type(3),
.csslider>input:nth-of-type(3):checked~.arrows>label:nth-of-type(4),
.csslider>input:nth-of-type(4):checked~.arrows>label:nth-of-type(5),
.csslider>input:nth-of-type(5):checked~.arrows>label:nth-of-type(6),
.csslider>input:nth-of-type(6):checked~.arrows>label:nth-of-type(7),
.csslider>input:nth-of-type(7):checked~.arrows>label:nth-of-type(8),
.csslider>input:nth-of-type(8):checked~.arrows>label:nth-of-type(9),
.csslider>input:nth-of-type(9):checked~.arrows>label:nth-of-type(10),
.csslider>input:nth-of-type(10):checked~.arrows>label:nth-of-type(11),
.csslider>input:nth-of-type(11):checked~.arrows>label:nth-of-type(12) {
  display: block;
  right: 0;
  left: auto;
  -moz-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
}


/*#region MODULES */


/*#endregion */

* {
  margin: 0;
  padding: 0;
}

::-webkit-scrollbar {
  width: 2px;
  background: rgba(255, 255, 255, 0.1);
}

::-webkit-scrollbar-track {
  background: none;
}

::-webkit-scrollbar-thumb {
  background: rgba(74, 168, 0, 0.6);
}

ul,
ol {
  padding-left: 40px;
}

html,
body {
  height: 100%;
  overflow-x: hidden;
  text-align: center;
  font: 400 100% 'Raleway', 'Lato';
  background-color: #282828;
  color: #CCC;
}

body {
  padding-bottom: 60px;
}

h1 {
  font-weight: 700;
  font-size: 310%;
}

h2 {
  font-weight: 400;
  font-size: 120%;
  color: #71AD37;
}

#slider1 {
  margin: 20px;
  font-family: 'Lato';
}

#slider1>ul>li:nth-of-type(3) {
  background: red;
}

#slider1>input:nth-of-type(3):checked~ul #bg {
  width: 80%;
  padding: 22px;
  -moz-transition: 0.5s 0.5s;
  -o-transition: 0.5s 0.5s;
  -webkit-transition: 0.5s 0.5s;
  transition: 0.5s 0.5s;
}

#slider1>input:nth-of-type(3):checked~ul #bg div {
  -moz-transform: translate(0);
  -ms-transform: translate(0);
  -o-transform: translate(0);
  -webkit-transform: translate(0);
  transform: translate(0);
  -moz-transition: 0.5s 0.9s;
  -o-transition: 0.5s 0.9s;
  -webkit-transition: 0.5s 0.9s;
  transition: 0.5s 0.9s;
}

#slider1>input:nth-of-type(6):checked~ul #dex-sign {
  -moz-animation: sign-anim 3.5s 0.5s steps(85) forwards;
  -o-animation: sign-anim 3.5s 0.5s steps(85) forwards;
  -webkit-animation: sign-anim 3.5s 0.5s steps(85) forwards;
  animation: sign-anim 3.5s 0.5s steps(85) forwards;
}

#bg {
  color: #000;
  padding: 22px 0;
  position: absolute;
  left: 0;
  top: 16%;
  height: 20%;
  width: 0;
  z-index: 10;
  overflow: hidden;
}

#bg:before {
  content: '';
  position: absolute;
  left: -1px;
  top: 1px;
  height: 100%;
  width: 100%;
  z-index: -1;
  background: green;
  -webkit-filter: blur(7px);
}

#bg:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 20;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

#bg div {
  -moz-transform: translate(120%);
  -ms-transform: translate(120%);
  -o-transform: translate(120%);
  -webkit-transform: translate(120%);
  transform: translate(120%);
}

.scrollable p {
  padding: 30px;
  text-align: justify;
  line-height: 140%;
  font-size: 120%;
}

#center {
  text-align: center;
  margin-top: 25%;
}

#center a {
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-variant: small-caps;
}


/*___________________________________ LINK ___________________________________ */

a.nice-link {
  position: relative;
  color: #71ad37;
}

h1 a.nice-link:after {
  border-bottom: 1px solid #a5ff0e;
}

a.nice-link:after {
  text-align: justify;
  display: inline-block;
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  overflow: hidden;
  color: #a5ff0e;
  min-height: 100%;
  width: 0;
  max-width: 100%;
  background: #3A3A3A;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

a.nice-link:hover {
  color: #71ad37;
}

a.nice-link:hover:after {
  width: 100%;
}


/*___________________________________ SIGN ___________________________________ */

#dex-sign {
  width: 255px;
  height: 84px;
  position: absolute;
  left: 33%;
  top: 45%;
  opacity: 0.7;
  background: white 0 0 no-repeat;
}

#dex-sign:hover {
  opacity: 1;
  -webkit-filter: invert(30%) brightness(80%) sepia(100%) contrast(110%) saturate(953%) hue-rotate(45deg);
}

@-webkit-keyframes sign-anim {
  to {
    background-position: 0 -7140px;
  }
}

@-moz-keyframes sign-anim {
  to {
    background-position: 0 -7140px;
  }
}

@keyframes sign-anim {
  to {
    background-position: 0 -7140px;
  }
}
<div class="csslider infinity" id="slider1">
  <input type="radio" name="slides" checked="checked" id="slides_1" />
  <input type="radio" name="slides" id="slides_2" />
  <input type="radio" name="slides" id="slides_3" />
  <input type="radio" name="slides" id="slides_4" />
  <input type="radio" name="slides" id="slides_5" />
  <input type="radio" name="slides" id="slides_6" />
  <ul>
    <li>Slide 1</li>
    <li>Slide 2</li>
    <li>Slide 3</li>
    <li>Slide 4</li>
    <li>Slide 5</li>
    <li>Slide 6</li>
  </ul>
  <div class="arrows">
    <label for="slides_1"></label>
    <label for="slides_2"></label>
    <label for="slides_3"></label>
    <label for="slides_4"></label>
    <label for="slides_5"></label>
    <label for="slides_6"></label>
    <label class="goto-first" for="slides_1"></label>
    <label class="goto-last" for="slides_6"></label>
  </div>
  <div class="navigation">
    <div>
      <label for="slides_1"></label>
      <label for="slides_2"></label>
      <label for="slides_3"></label>
      <label for="slides_4"></label>
      <label for="slides_5"></label>
      <label for="slides_6"></label>
    </div>
  </div>
</div>

View on Codepen.

Edit

I came up with this solution:

setInterval(function() {

  var currentID = document.querySelector('input[name="slides"]:checked').id;
  var idNoArr = currentID.split('');
  var intIdNo = parseInt(idNoArr[1]);
  var nextIdNo = intIdNo + 1;
  var NextId = idNoArr[0] + '' + nextIdNo;
  var NextInput = document.getElementById(NextId);

  if (!NextInput) {
    NextId = idNoArr[0] + '_1';
  }

  document.getElementById(NextId).checked = true;

}, 1000);
showdev
  • 28,454
  • 37
  • 55
  • 73
Tilok Paul
  • 41
  • 1
  • 4
  • 1
    Did you ask the same question before? – Krishna Prashatt Mar 07 '19 at 10:47
  • In what way does it not work? What is the desired functionality and what specifically goes wrong? – showdev Mar 07 '19 at 10:48
  • Is working just fine... Specify the problem – mindmaster Mar 07 '19 at 10:54
  • 1
    Actually I want to set auto play function without jQuery. Its not work remove jQuery : https://codepen.io/codet/pen/drvvEV – Tilok Paul Mar 07 '19 at 10:57
  • did you check this ? https://codepen.io/doodlemarks/pen/xDvAw – Shanu T Thankachan Mar 07 '19 at 10:59
  • 1
    Check https://codepen.io/doodlemarks/pen/xDvAw this pen.But I am not interested in Use jQuery library . Want to use only JavaScript. – Tilok Paul Mar 07 '19 at 11:03
  • Ok I got this solution : setInterval(function(){ var currentID = document.querySelector('input[name="slides"]:checked').id; var idNoArr = currentID.split('_'); var intIdNo = parseInt(idNoArr[1]); var nextIdNo = intIdNo +1; var NextId = idNoArr[0]+'_'+nextIdNo; var NextInput = document.getElementById(NextId); if(!NextInput){ NextId = idNoArr[0]+'_1'; } document.getElementById(NextId).checked = true; }, 1000); – Tilok Paul Mar 07 '19 at 11:25
  • That looks pretty gnarly. Personally, I'd opt for a cleaner more sustainable method than parsing IDs. But if it works for you, then it works! I appreciate your ingenuity. – showdev Mar 07 '19 at 13:12

1 Answers1

0

There are several issues, including:

  1. nextSibling isn't limited to inputs, and may even select white space between elements.
  2. Elements don't have a length property.
  3. Setting an attribute only sets the default state, not the current state.

I recommend selecting a list of all the inputs with querySelectorAll and then cycling through them using an index. To cycle the index within the appropriate bounds, I'm using the remainder of the current index divided by the total number of inputs.

Edit:

I see that your jQuery code determines which input is checked before changing the slide. This allows the automatic rotation to pick up where the user left off after they manually select a slide. I've modified my code accordingly.

You might also consider some functionality to stop or delay the automatic rotation if the user manually selects a slide. When someone clicks to a specific slide, I often choose to delay the automatic rotation for a few seconds or even have it stop completely. Just an idea.

Here's a working example:

// select node list of all inputs
var allInputs = document.querySelectorAll('#slider1 input[type=radio]');

// function to determine index of "checked" input in the list
function getCheckedIndex(list) {
  for (let i = 0; i < list.length; i++) {
    if (list[i].checked) {
      return i;
    }
  }
}

// start the interval
setInterval(() => {

  // determine index of "checked" input
  let index = getCheckedIndex(allInputs);

  // determine the next index
  index = (index + 1) % allInputs.length;

  // set the "checked" property
  allInputs[index].checked = true;

}, 1000);
.csslider {
  -moz-perspective: 1300px;
  -ms-perspective: 1300px;
  -webkit-perspective: 1300px;
  perspective: 1300px;
  display: inline-block;
  text-align: left;
  position: relative;
  margin-bottom: 22px;
}

.csslider>input {
  display: none;
}

.csslider>input:nth-of-type(10):checked~ul li:first-of-type {
  margin-left: -900%;
}

.csslider>input:nth-of-type(9):checked~ul li:first-of-type {
  margin-left: -800%;
}

.csslider>input:nth-of-type(8):checked~ul li:first-of-type {
  margin-left: -700%;
}

.csslider>input:nth-of-type(7):checked~ul li:first-of-type {
  margin-left: -600%;
}

.csslider>input:nth-of-type(6):checked~ul li:first-of-type {
  margin-left: -500%;
}

.csslider>input:nth-of-type(5):checked~ul li:first-of-type {
  margin-left: -400%;
}

.csslider>input:nth-of-type(4):checked~ul li:first-of-type {
  margin-left: -300%;
}

.csslider>input:nth-of-type(3):checked~ul li:first-of-type {
  margin-left: -200%;
}

.csslider>input:nth-of-type(2):checked~ul li:first-of-type {
  margin-left: -100%;
}

.csslider>input:nth-of-type(1):checked~ul li:first-of-type {
  margin-left: 0%;
}

.csslider>ul {
  position: relative;
  width: 820px;
  height: 420px;
  z-index: 1;
  font-size: 0;
  line-height: 0;
  background-color: #3A3A3A;
  border: 10px solid #3A3A3A;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.csslider>ul>li {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 15px;
  font-size: initial;
  line-height: normal;
  -moz-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
  transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
  vertical-align: top;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  white-space: normal;
}

.csslider>ul>li.scrollable {
  overflow-y: scroll;
}

.csslider>.navigation {
  position: absolute;
  bottom: -8px;
  left: 50%;
  z-index: 10;
  margin-bottom: -10px;
  font-size: 0;
  line-height: 0;
  text-align: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.csslider>.navigation>div {
  margin-left: -100%;
}

.csslider>.navigation label {
  position: relative;
  display: inline-block;
  cursor: pointer;
  border-radius: 50%;
  margin: 0 4px;
  padding: 4px;
  background: #3A3A3A;
}

.csslider>.navigation label:hover:after {
  opacity: 1;
}

.csslider>.navigation label:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -6px;
  margin-top: -6px;
  background: #71ad37;
  border-radius: 50%;
  padding: 6px;
  opacity: 0;
}

.csslider>.arrows {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.csslider.inside .navigation {
  bottom: 10px;
  margin-bottom: 10px;
}

.csslider.inside .navigation label {
  border: 1px solid #7e7e7e;
}

.csslider>input:nth-of-type(1):checked~.navigation label:nth-of-type(1):after,
.csslider>input:nth-of-type(2):checked~.navigation label:nth-of-type(2):after,
.csslider>input:nth-of-type(3):checked~.navigation label:nth-of-type(3):after,
.csslider>input:nth-of-type(4):checked~.navigation label:nth-of-type(4):after,
.csslider>input:nth-of-type(5):checked~.navigation label:nth-of-type(5):after,
.csslider>input:nth-of-type(6):checked~.navigation label:nth-of-type(6):after,
.csslider>input:nth-of-type(7):checked~.navigation label:nth-of-type(7):after,
.csslider>input:nth-of-type(8):checked~.navigation label:nth-of-type(8):after,
.csslider>input:nth-of-type(9):checked~.navigation label:nth-of-type(9):after,
.csslider>input:nth-of-type(10):checked~.navigation label:nth-of-type(10):after,
.csslider>input:nth-of-type(11):checked~.navigation label:nth-of-type(11):after {
  opacity: 1;
}

.csslider>.arrows {
  position: absolute;
  left: -31px;
  top: 50%;
  width: 100%;
  height: 26px;
  padding: 0 31px;
  z-index: 0;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

.csslider>.arrows label {
  display: none;
  position: absolute;
  top: -50%;
  padding: 13px;
  box-shadow: inset 2px -2px 0 1px #3A3A3A;
  cursor: pointer;
  -moz-transition: box-shadow 0.15s, margin 0.15s;
  -o-transition: box-shadow 0.15s, margin 0.15s;
  -webkit-transition: box-shadow 0.15s, margin 0.15s;
  transition: box-shadow 0.15s, margin 0.15s;
}

.csslider>.arrows label:hover {
  box-shadow: inset 3px -3px 0 2px #71ad37;
  margin: 0 0px;
}

.csslider>.arrows label:before {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  height: 300%;
  width: 300%;
}

.csslider.infinity>input:first-of-type:checked~.arrows label.goto-last,
.csslider>input:nth-of-type(1):checked~.arrows>label:nth-of-type(0),
.csslider>input:nth-of-type(2):checked~.arrows>label:nth-of-type(1),
.csslider>input:nth-of-type(3):checked~.arrows>label:nth-of-type(2),
.csslider>input:nth-of-type(4):checked~.arrows>label:nth-of-type(3),
.csslider>input:nth-of-type(5):checked~.arrows>label:nth-of-type(4),
.csslider>input:nth-of-type(6):checked~.arrows>label:nth-of-type(5),
.csslider>input:nth-of-type(7):checked~.arrows>label:nth-of-type(6),
.csslider>input:nth-of-type(8):checked~.arrows>label:nth-of-type(7),
.csslider>input:nth-of-type(9):checked~.arrows>label:nth-of-type(8),
.csslider>input:nth-of-type(10):checked~.arrows>label:nth-of-type(9),
.csslider>input:nth-of-type(11):checked~.arrows>label:nth-of-type(10) {
  display: block;
  left: 0;
  right: auto;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.csslider.infinity>input:last-of-type:checked~.arrows label.goto-first,
.csslider>input:nth-of-type(1):checked~.arrows>label:nth-of-type(2),
.csslider>input:nth-of-type(2):checked~.arrows>label:nth-of-type(3),
.csslider>input:nth-of-type(3):checked~.arrows>label:nth-of-type(4),
.csslider>input:nth-of-type(4):checked~.arrows>label:nth-of-type(5),
.csslider>input:nth-of-type(5):checked~.arrows>label:nth-of-type(6),
.csslider>input:nth-of-type(6):checked~.arrows>label:nth-of-type(7),
.csslider>input:nth-of-type(7):checked~.arrows>label:nth-of-type(8),
.csslider>input:nth-of-type(8):checked~.arrows>label:nth-of-type(9),
.csslider>input:nth-of-type(9):checked~.arrows>label:nth-of-type(10),
.csslider>input:nth-of-type(10):checked~.arrows>label:nth-of-type(11),
.csslider>input:nth-of-type(11):checked~.arrows>label:nth-of-type(12) {
  display: block;
  right: 0;
  left: auto;
  -moz-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
}

* {
  margin: 0;
  padding: 0;
}

::-webkit-scrollbar {
  width: 2px;
  background: rgba(255, 255, 255, 0.1);
}

::-webkit-scrollbar-track {
  background: none;
}

::-webkit-scrollbar-thumb {
  background: rgba(74, 168, 0, 0.6);
}

ul,
ol {
  padding-left: 40px;
}

html,
body {
  height: 100%;
  overflow-x: hidden;
  text-align: center;
  font: 400 100% 'Raleway', 'Lato';
  background-color: #282828;
  color: #CCC;
}

body {
  padding-bottom: 60px;
}

h1 {
  font-weight: 700;
  font-size: 310%;
}

h2 {
  font-weight: 400;
  font-size: 120%;
  color: #71AD37;
}

#slider1 {
  margin: 20px;
  font-family: 'Lato';
}

#slider1>ul>li:nth-of-type(3) {
  background: red;
}

#slider1>input:nth-of-type(3):checked~ul #bg {
  width: 80%;
  padding: 22px;
  -moz-transition: 0.5s 0.5s;
  -o-transition: 0.5s 0.5s;
  -webkit-transition: 0.5s 0.5s;
  transition: 0.5s 0.5s;
}

#slider1>input:nth-of-type(3):checked~ul #bg div {
  -moz-transform: translate(0);
  -ms-transform: translate(0);
  -o-transform: translate(0);
  -webkit-transform: translate(0);
  transform: translate(0);
  -moz-transition: 0.5s 0.9s;
  -o-transition: 0.5s 0.9s;
  -webkit-transition: 0.5s 0.9s;
  transition: 0.5s 0.9s;
}

#slider1>input:nth-of-type(6):checked~ul #dex-sign {
  -moz-animation: sign-anim 3.5s 0.5s steps(85) forwards;
  -o-animation: sign-anim 3.5s 0.5s steps(85) forwards;
  -webkit-animation: sign-anim 3.5s 0.5s steps(85) forwards;
  animation: sign-anim 3.5s 0.5s steps(85) forwards;
}

#bg {
  color: #000;
  padding: 22px 0;
  position: absolute;
  left: 0;
  top: 16%;
  height: 20%;
  width: 0;
  z-index: 10;
  overflow: hidden;
}

#bg:before {
  content: '';
  position: absolute;
  left: -1px;
  top: 1px;
  height: 100%;
  width: 100%;
  z-index: -1;
  background: green;
  -webkit-filter: blur(7px);
}

#bg:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 20;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

#bg div {
  -moz-transform: translate(120%);
  -ms-transform: translate(120%);
  -o-transform: translate(120%);
  -webkit-transform: translate(120%);
  transform: translate(120%);
}

.scrollable p {
  padding: 30px;
  text-align: justify;
  line-height: 140%;
  font-size: 120%;
}

#center {
  text-align: center;
  margin-top: 25%;
}

#center a {
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-variant: small-caps;
}


/*___________________________________ LINK ___________________________________ */

a.nice-link {
  position: relative;
  color: #71ad37;
}

h1 a.nice-link:after {
  border-bottom: 1px solid #a5ff0e;
}

a.nice-link:after {
  text-align: justify;
  display: inline-block;
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  overflow: hidden;
  color: #a5ff0e;
  min-height: 100%;
  width: 0;
  max-width: 100%;
  background: #3A3A3A;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

a.nice-link:hover {
  color: #71ad37;
}

a.nice-link:hover:after {
  width: 100%;
}


/*___________________________________ SIGN ___________________________________ */

#dex-sign {
  width: 255px;
  height: 84px;
  position: absolute;
  left: 33%;
  top: 45%;
  opacity: 0.7;
  background: white 0 0 no-repeat;
}

#dex-sign:hover {
  opacity: 1;
  -webkit-filter: invert(30%) brightness(80%) sepia(100%) contrast(110%) saturate(953%) hue-rotate(45deg);
}

@-webkit-keyframes sign-anim {
  to {
    background-position: 0 -7140px;
  }
}

@-moz-keyframes sign-anim {
  to {
    background-position: 0 -7140px;
  }
}

@keyframes sign-anim {
  to {
    background-position: 0 -7140px;
  }
}
<div class="csslider infinity" id="slider1">
  <input type="radio" name="slides" id="slides_1">
  <input type="radio" name="slides" id="slides_2">
  <input type="radio" name="slides" id="slides_3" checked>
  <input type="radio" name="slides" id="slides_4">
  <input type="radio" name="slides" id="slides_5">
  <input type="radio" name="slides" id="slides_6">
  <ul>
    <li>Slide 1</li>
    <li>Slide 2</li>
    <li>Slide 3</li>
    <li>Slide 4</li>
    <li>Slide 5</li>
    <li>Slide 6</li>
  </ul>
  <div class="arrows">
    <label for="slides_1"></label>
    <label for="slides_2"></label>
    <label for="slides_3"></label>
    <label for="slides_4"></label>
    <label for="slides_5"></label>
    <label for="slides_6"></label>
    <label class="goto-first" for="slides_1"></label>
    <label class="goto-last" for="slides_6"></label>
  </div>
  <div class="navigation">
    <div>
      <label for="slides_1"></label>
      <label for="slides_2"></label>
      <label for="slides_3"></label>
      <label for="slides_4"></label>
      <label for="slides_5"></label>
      <label for="slides_6"></label>
    </div>
  </div>
</div>
showdev
  • 28,454
  • 37
  • 55
  • 73