Custom Cursor wird nicht angezeigt?
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! (:
2 Antworten
Weiß jemand wie/ob man so etwas programmieren kann bzw. wo mein Fehler liegen könnte?
Prüfe deine Cursor-Bilder nochmal auf bestimmte Kriterien:
- Die Bildgröße sollte je Dimension nicht über 32px gehen, andernfalls kann es sein, dass der User Agent das Bild von sich aus blockt
- Die angegebene Pfadangabe; ob das Bild generell vom Browser geladen werden kann, solltest du in den Entwicklertools deines Browsers sehen. Schau im Konsolentab, nach entsprechenden Fehlermeldungen oder über den Netzwerktab, welche Bildanfragen nicht erfolgreich sind
- Den Bildtyp; Lade das Bild am besten noch einmal in ein Bildbearbeitungsprogramm wie Gimp und speichere/exportiere es nochmal neu als PNG
Die Programmierung von meiner Bildergalerie (Slider) hat mir ein paar Schwiergkeiten bereitet (...)
Statt das Rad neu zu erfinden, kannst du auf vorgefertigte Bibliotheken zurückgreifen. Zum Beispiel Flickity, slick, Splide oder Tiny Slider.
Hey, vieeelen Dank für deine ausführliche Antwort!! Lag tatsächlich "nur" an der Bildgröße, die war viel zu hoch...jetzt funktioniert es (:
Die Frage, die immer wieder geklärt werden muss, ist die Adresse der Referenz. (hier: die Grafik für den Cursor-Pointer)
Liegt die Grafik in einen Unterverzeichnis oder im selben Verzeichnis (ggf. Hauptverzeichnis)?