Jump to content

Custom Code had stopped scrolling

Recommended Posts

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>

Link to comment
  • Replies 2
  • Views 926
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.