)
Kod:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webailesi.com - Taha KOÇAK</title>
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
<link rel="stylesheet" href="https://www.webailesi.com/yonlendir.php?link=https%3A%2F%2Fstackpath.bootstrapcdn.com%2Fbootstrap%2F4.4.1%2Fcss%2Fbootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<style>
.max-height {
min-height: 100vh;
}
body {
background: #eee;
}
.img-container {
min-height: 60vh;
background: url("../img/contBcg-0.jpeg") center/cover fixed no-repeat;
border: 0.5rem solid lightgreen;
border-radius: 0.5rem;
position: relative;
}
@media screen and (min-width: 768px) {
.img-container {
min-height: 80vh;
}
}
.btn-left {
position: absolute;
top: 50%;
left: 0;
background: lightgreen;
color: white !important;
transform: translate(-50%, -50%);
border: 0.2rem solid lightgreen;
font-size: 1.2rem;
}
.btn-left:hover {
border-color: lightgreen;
background: #eee;
color: lightgreen !important;
}
.btn-right {
position: absolute;
top: 50%;
right: 0;
background: lightgreen;
color: #eee !important;
font-size: 1.2rem;
transform: translate(50%, -50%);
border: 0.2rem solid lightgreen;
}
.btn-right:hover {
border-color: lightgreen;
background: #eee;
color: lightgreen !important;
}
</style>
<div class="container">
<div class="row max-height align-items-center">
<div class="col-9 col-md-10 mx-auto img-container">
<a class="btn btn-left"><i class="fas fa-caret-left"></i></a>
<a class="btn btn-right"><i class="fas fa-caret-right"></i></a>
</div>
</div>
</div>
<script>
// resim ismileri
const pictures = [
"web1",
"web2"
];
// Secicileri dinliyoruz
const buttons = document.querySelectorAll('.btn')
const imageDIV = document.querySelector('.img-container')
let counter = 0
buttons.forEach(function(button){
button.addEventListener('click', function(e){
if (button.classList.contains('btn-left')){
counter--
if(counter < 0){
counter = pictures.length -1
}
imageDIV.style.backgroundImage = `url('${pictures[counter]}.jpeg')`
}
if (button.classList.contains('btn-right')){
counter++
if(counter > pictures.length -1){
counter = 0
}
imageDIV.style.backgroundImage = `url('${pictures[counter]}.jpeg')`
}
})
})
</script>
</body>
</html>Ekran Görüntüsü:
