conveter codigo jquery para js puro
<html>
<style> width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#carousel {
position: relative;
height: 400px;
top: 50%;
transform: translateY(-50%);
overflow: hidden;
} position: absolute;
transition: transform 1s, left 1s, opacity 1s, z-index 0s;
opacity: 1;
} width: 400px;
transition: width 1s;
} left: 0%;
opacity: 0;
transform: translateY(50%) translateX(-50%);
} width: 200px;
} left: 100%;
opacity: 0;
transform: translateY(50%) translateX(-50%);
} width: 200px;
} z-index: 5;
left: 30%;
transform: translateY(50px) translateX(-50%);
} width: 300px;
} z-index: 4;
left: 15%;
transform: translateY(50%) translateX(-50%);
opacity: 0.7;
} width: 200px;
} z-index: 10;
left: 50%;
transform: translateY(0px) translateX(-50%);
} z-index: 5;
left: 70%;
transform: translateY(50px) translateX(-50%);
} width: 300px;
} z-index: 4;
left: 85%;
transform: translateY(50%) translateX(-50%);
opacity: 0.7;
} width: 200px;
}
.buttons {
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: 10px;
}
</style>
<body>
<main>
<div id="carousel">
<div class="hideLeft">
<img src="https://i1.sndcdn.com/artworks-000165384395-rhrjdn-t500x500.jpg">
</div>
<div class="prevLeftSecond">
<img src="https://i1.sndcdn.com/artworks-000185743981-tuesoj-t500x500.jpg">
</div>
<div class="prev">
<img src="https://i1.sndcdn.com/artworks-000158708482-k160g1-t500x500.jpg">
</div>
<div class="selected">
<img src="https://i1.sndcdn.com/artworks-000062423439-lf7ll2-t500x500.jpg">
</div>
<div class="next">
<img src="https://i1.sndcdn.com/artworks-000028787381-1vad7y-t500x500.jpg">
</div>
<div class="nextRightSecond">
<img src="https://i1.sndcdn.com/artworks-000108468163-dp0b6y-t500x500.jpg">
</div>
<div class="hideRight">
<img src="https://i1.sndcdn.com/artworks-000064920701-xrez5z-t500x500.jpg">
</div>
</div>
<div class="buttons">
<button id="prev">Prev</button>
<button id="next">Next</button>
</div>
</main>
</body>
<script>
window.onload = function(){
function moveToSelected(element) {
if (element == "next") {
var selected = document.querySelector(".selected").nextElementSibling;
} else if (element == "prev") {
var selected = document.querySelector(".selected").previousElementSibling;
} else {
var selected = element;
}
var next = selected.nextElementSibling;
var prev = selected.previousElementSibling;
var prevSecond = prev.previousSibling;
var nextSecond = next.nextSibling;
function matches(elem, filter) {
if (elem && elem.nodeType === 1) {
if (filter) {
return elem.matches(filter);
}
return true;
}
return false;
}
function getNextSiblings(elem, filter) {
var sibs = [];
while (elem = elem.nextSibling) {
if (matches(elem, filter)) {
sibs.push(elem);
}
}
return sibs;
}
function getPreviousSiblings(elem, filter) {
var sibs = [];
while (elem = elem.previousSibling) {
if (matches(elem, filter)) {
sibs.push(elem);
}
}
return sibs;
}
selected.removeAttribute('class');
prev.removeAttribute('class');
next.removeAttribute('class');
selected.classList.add("selected");
prev.classList.add("prev");
next.classList.add("next");
prevSecond.removeAttribute('class');
nextSecond.removeAttribute('class').classList.add("nextRightSecond");
prevSecond.classList.add("prevLeftSecond");
var x = getNextSiblings(nextSecond);
var p = getPreviousSiblings(prevSecond);
for (var i = 0; i < x.length; i++) {
x[i].removeAttribute('class');
x[i].classList.add("hideRight");
}
for (var i = 0; i < p.length; i++) {
p[i].removeAttribute('class');
p[i].classList.add("hideLeft");
}
}
document.body.addEventListener("keydown", function (e) {
switch(e.which) {
case 37: // left
moveToSelected('prev');
break;
case 39: // right
moveToSelected('next');
break;
default: return;
}
e.preventDefault();
});
document.querySelector("#carousel div").addEventListener("click", function () {
moveToSelected(this);
});
document.querySelector("#prev").addEventListener("click", function () {
moveToSelected('prev');
});
document.querySelector("#next").addEventListener("click", function () {
moveToSelected('next');
});
}
</script>
</html>
com jquery funciona assim
function moveToSelected(element) {
if (element == "next") {
var selected = $(".selected").next();
} else if (element == "prev") {
var selected = $(".selected").prev();
} else {
var selected = element;
}
console.log(selected);
}// Eventos teclado
$(document).keydown(function(e) {
switch(e.which) {
case 37: // left
moveToSelected('prev');
break;
case 39: // right
moveToSelected('next');
break;
default: return;
}
e.preventDefault();
});
$('#carousel div').click(function() {
moveToSelected($(this));
});
$('#prev').click(function() {
moveToSelected('prev');
});
$('#next').click(function() {
moveToSelected('next');
});Discussão (2)
Carregando comentários...