Carousel slider with indicator navigation - is a "CSS-only" design possible?

Question

Right now, the navigations/anchors are numerical numbers, but I want a design that is sorta "indicator", meaning instead of clicking the numbers to navigate, the user can click on round circles(with no numbers) to jump to different slides, and the corresponding circles turned dark when the slides are selected.

So....Is it possible by using ONLY CSS?

  html,
body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f2f3f7;
  font-family: Consolas;
}

.slider {
  width: 600px;
  text-align: center;
  overflow: visible;
  background: #f2f3f7;
}

.slider>a {
  display: inline-flex;
  font-size: 20px;
  width: 30px;
  height: 26px;
  padding-top: 3px;
  border-radius: 50%;
  margin-bottom: 0.5rem;
  margin-right: 5px;
  margin-left: 5px;
  text-decoration: none;
  justify-content: center;
  align-items: center;
  background: rgba(128, 128, 128, 0.3);
  color: rgba(108, 18, 144, 0.8);
}

.slider>a:active {
  background: black;
}

.slidescontainer {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  background: #f2f3f7;
  padding-top: 2.5rem;
  padding-bottom: 2rem;
}

.slidescontainer::-webkit-scrollbar {
  height: 1rem;
}

.slidescontainer::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.5);
  border-radius: 8px;
}

.slidescontainer::-webkit-scrollbar-thumb:hover {
  background: black;
}

.slidescontainer::-webkit-scrollbar-track {
  background: transparent;
  .slidescontainer>div {
    scroll-snap-align: center;
    flex-shrink: 0;
    width: 500px;
    height: 300px;
    margin-left: 3rem;
    margin-right: 3rem;
    border-radius: 3rem;
    background: #f2f3f7;
    box-shadow: 0.6rem 0.6rem 1.2rem #d2dce9, -0.5em -0.5em 1em #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
  }
  .slidescontainer #slide-1,
  #slide-2,
  #slide-3,
  #slide-4 {
    flex-direction: column;
    padding: 0;
  }
  .slide-title {
    padding-left: 2rem;
    padding-right: 2rem;
  }

<div class="slider">
  <a href="#slide-1">1</a>
  <a href="#slide-2">2</a>
  <a href="#slide-3">3</a>
  <a href="#slide-4">4</a>

  <div class="slidescontainer">
    <div id="slide-1">
      <div class="slide-title">1st slide, text-align: justify</div>
      <div style="font-size: 12px; text-align: justify; padding-left: 30px; padding-right:30px;">Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin</div>
    </div>
    <div id="slide-2">
      <div class="slide-title">2nd slide, text-align: left</div>
      <div style="font-size: 12px; text-align: left; padding-left: 30px;">Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin</div>
    </div>
    <div id="slide-3">
      <div class="slide-title">3rd slide, text-align: end</div>
      <div style="font-size: 12px; text-align: end; padding-right: 30px;">Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin</div>
    </div>
    <div id="slide-4">
      <div class="slide-title">4th slide, text-align: right</div>
      <div style="font-size: 12px; text-align: right; padding-right: 30px;">Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin</div>
    </div>
  </div>

</div>