Die Programmierung von meiner Bildergalerie (Slider) hat mir ein paar Schwiergkeiten bereitet...schlussendlich habe ich chatgpt gefragt und der hat mir direkt einen Code ausgespuckt- der funktioniert auch soweit so gut allerdings werden die Mouse-Cursor immer noch nicht richtig angezeigt. Eigentlich sollten diese eigene Bilder anzeigen, je nachdem über welche seite des Bildes man sich bewegt. Weiß jemand wie/ob man so etwas programmieren kann bzw. wo mein Fehler liegen könnte?
- Die Bilder liegen aufjeden Fall im selben Ordner wie index2.html
Hier der vollständige Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bild-Slider mit benutzerdefiniertem Cursor</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.slider-container {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
border: 2px solid #ccc;
border-radius: 10px;
}
.slider-images {
display: flex;
transition: transform 0.5s ease-in-out;
}
.slider-images img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Unsichtbare, transparente Boxen für Cursorsteuerung */
.slider-nav {
position: absolute;
top: 0;
width: 20%; /* Nur ein schmaler Bereich am linken und rechten Rand */
height: 100%;
background-color: transparent;
z-index: 2;
}
/* Linke Box: Cursor ändert sich beim Hover */
.slider-nav.left {
left: 0;
cursor: url('pfeillinks.png') 22 22, auto; /* Benutzerdefinierter Cursor (Hotspot bei 22px, 22px) */
}
/* Rechte Box: Cursor ändert sich beim Hover */
.slider-nav.right {
right: 0;
cursor: url('pfeilrechts.png') 22 22, auto; /* Benutzerdefinierter Cursor (Hotspot bei 22px, 22px) */
}
/* Hover-Effekt: Cursor als Pointer, wenn er über den Boxen schwebt */
.slider-nav.left:hover {
cursor: url('pfeillinks.png') 22 22, pointer; /* Benutzerdefinierter Cursor (Hotspot bei 22px, 22px) */
}
.slider-nav.right:hover {
cursor: url('pfeilrechts.png') 22 22, pointer; /* Benutzerdefinierter Cursor (Hotspot bei 22px, 22px) */
}
</style>
</head>
<body>
<div class="slider-container">
<div class="slider-images">
<img src="https://via.placeholder.com/500x300/FF5733" alt="Bild 1">
<img src="https://via.placeholder.com/500x300/33C4FF" alt="Bild 2">
<img src="https://via.placeholder.com/500x300/75FF33" alt="Bild 3">
</div>
<!-- Unsichtbare Boxen für die Linke und Rechte Navigation -->
<div class="slider-nav left" onclick="changeSlide('prev')"></div>
<div class="slider-nav right" onclick="changeSlide('next')"></div>
</div>
<script>
let currentIndex = 0;
const images = document.querySelectorAll('.slider-images img');
const totalImages = images.length;
function changeSlide(direction) {
if (direction === 'next') {
currentIndex = (currentIndex + 1) % totalImages;
} else if (direction === 'prev') {
currentIndex = (currentIndex - 1 + totalImages) % totalImages;
}
const sliderImages = document.querySelector('.slider-images');
sliderImages.style.transform = `translateX(-${currentIndex * 100}%)`;
}
</script>
</body>
</html>
Ich bin jedem der sich mit dem Problem beschäftigt dankbar! (: