jQuery滑块转换为原始JavaScript无效

Question

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

Answer 1

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>