Hi - I've been trying to add some custom HTML to add a image carousel onto my site, and was all working fine until I redid some of the code and it seems to have locked my site on a specific section of the page. I can't scroll up or down anymore, and the block that I was adding code to is now above where it's locked onto. So I can't seem to access the block to change/delete the code... Any help would be greatly appreciate! Here is the code I was using below which seemed to have caused the bug -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Carousel</title>
<style>
.carousel {
width: 300px;
overflow: hidden;
position: relative;
}
.carousel-inner {
display: flex;
transition: transform 0.5s ease;
}
.carousel-item {
flex: 0 0 100%;
}
.carousel-item img {
width: 100%;
height: auto;
}
#radio-buttons {
text-align: center;
}
#radio-buttons input[type="radio"] {
display: none;
}
#radio-buttons label {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background: gray;
margin: 0 5px;
cursor: pointer;
}
#radio-buttons input[type="radio"]:checked + label {
background: black;
}
</style>
</head>
<body>
<div class="carousel">
<div class="carousel-inner">
<div class="carousel-item">
<img src="image1.jpg" alt="Image 1">
</div>
<div class="carousel-item">
<img src="image2.jpg" alt="Image 2">
</div>
<div class="carousel-item">
<img src="image3.jpg" alt="Image 3">
</div>
</div>
</div>
<div id="radio-buttons">
<input type="radio" id="radio1" name="radio-buttons" checked>
<label for="radio1"></label>
<input type="radio" id="radio2" name="radio-buttons">
<label for="radio2"></label>
<input type="radio" id="radio3" name="radio-buttons">
<label for="radio3"></label>
</div>
</body>
</html>
