Mobile Dots Glider Setup

responsive: [
{
breakpoint: 300,
settings: {
slidesToShow: 1.2,
scrollLock: false,
rewind: true
}
}
]
});
make dot appear in mobile

### HTML Structure
Ensure your HTML has a container for the pagination dots:

<div id="slider-simple" class="glider">
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</div>
<div class="pagination"></div>
<button class="slider-prev">Prev</button>
<button class="slider-next">Next</button>

### CSS
Ensure the dots are styled correctly for mobile viewports. Add this CSS to ensure the dots are visible and positioned appropriately:

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

@media (max-width: 768px) {
  .pagination {
    display: flex !important;
  }
}

### JavaScript
Update your Glider configuration to ensure dots functionality is enabled, and verify the container (`.pagination`) is properly targeted:

new Glider(document.getElementById("slider-simple"), {
  slidesToShow: 1,
  slidesToScroll: 1,
  draggable: true,
  rewind: true,
  duration: 0.5,
  dots: document.querySelector(".pagination"),
  arrows: {
    prev: ".slider-prev",
    next: ".slider-next"
  },
  responsive: [
    {
      breakpoint: 300,
      settings: {
        slidesToShow: 1.2,
        scrollLock: false,
        rewind: true
      }
    }
  ]
});

### Debugging Steps
1. **Ensure the Pagination Element Exists**
Confirm that the `.pagination` element exists in the DOM when the script runs.

2. **Inspect the Dots in the DOM**
Open the browser dev tools to verify that dots are being appended to the `.pagination` element.

3. **Check Visibility**
Make sure no CSS rule is hiding the dots on smaller screens.

With these adjustments, the dots should appear on mobile devices.