<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
body{
display: flex;
margin: 0;
padding: 0;
height: 100vh;
justify-content: center;
align-items: center;
}
.container-slider{
position: relative;
width: 650px;
min-width: 350px;
height: 350px;
border: 5px solid black;
border-radius: 5px;
padding: 5px;
box-sizing: border-box;
}
.container-slider > img{
width: 100%;
height: 100%;
}
.container-slider::after{
content: '';
position: absolute;
display: block;
left: 0;
top: 0;
width: 15%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
.container-slider::before{
content: '';
position: absolute;
display: block;
right: 0;
top: 0;
width: 15%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
.container-slider > span.back-btn{
position: absolute;
display: block;
top: 50%;
left: 2.5%;
border-bottom: 40px solid black;
border-right: 40px solid transparent;
border-left: 40px solid transparent;
transform: rotate(-90deg) translateY(-50%);
z-index: 999;
}
.container-slider > span.next-btn{
position: absolute;
display: block;
top: 50%;
right: 2.5%;
border-bottom: 40px solid black;
border-right: 40px solid transparent;
border-left: 40px solid transparent;
transform: rotate(90deg) translateY(-50%);
z-index: 999;
}
</style>
</head>
<body>
<div class="container-slider">
<span class="back-btn btn"></span>
<img src="" title="something" lang="pl">
<span class="next-btn btn"></span>
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
var picture = 1;
let img = document.querySelector('.container-slider > img');
img.src = picture + '.jpg';
const btnBack = document.querySelector('.back-btn');
const btnNext = document.querySelector('.next-btn');
const tab = [btnBack, btnNext]
for(let btn of tab){
btn.addEventListener("click", function(e){
if(btn.classList.contains('next-btn')){
img.src = ++picture + '.jpg';
if(picture === 3){
console.log('x');
e.preventDefault();
}
}
else{
img.src = --picture + '.jpg';
if(picture === 1){
console.log('x');
e.preventDefault();
}
}
});
}
}, false);
</script>
</body>
</html>
Zrobiłem prosty slider działa, ale nie do końca tak jak powinien to znaczy kiedy zmienna - > picture przetrzymująca numer wczytanego slajdu wynosi 3 lub 1 powinna odpalić się funkcja e.preventDault() by zablokować przejście do slajdu którego nie ma lecz to i tak nie nie dało.