HTML+CSS で作ったスライダーの選択中ボタンの素材差し替え

HTMLとSASSでスライダーを作成しています。

Aタグでスクロールするように作成したのですが、スライダーの切替ボタンの選択中とそうでないときの素材の切替をHTML+CSSのみでやろうとしたとき、inputタグとlabelを使用したほうがすっきり編集できるように思いました。

しかし、コード帰る途中でうまくいかなくなってしまったので、想定した挙動になるようなコードの記述方法をご教授いただきたいです。

HTML
1                <div class="slider">  <!-- スライダー -->
2                  <div class="sliders">
3                    <div id="slide2-1"><img src="/image/scene/slide2/slide2-1.png"></div>
4                    <div id="slide2-2"><img src="/image/scene/slide2/slide2-2.png"></div>
5                    <div id="slide2-3"><img src="/image/scene/slide2/slide2-3.png"></div>
6                  </div>
7                  <div class="flex link">
8                    <a href="#slide2-1"></a>
9                    <a href="#slide2-2"></a>
10                    <a href="#slide2-3"></a>
11                  </div>
12                </div> <!-- スライダー -->

CSS
1    .slider {
2      text-align: center;
3      overflow: hidden;
4      .link {
5        justify-content: space-around;
6      }
7      a {
8        background-size: contain;
9        margin: 0 1rem;
10        background-image: url(/image/common/slider_btn.png);
11        background-repeat: no-repeat;
12        width: 1rem;
13        height: 1rem;
14        display: block;
15      }
16    }
17    .sliders {
18      display: flex;
19
20      overflow-x: auto;
21      scroll-snap-type: x mandatory;
22
23      scroll-behavior: smooth;
24
25      &::-webkit-scrollbar {
26        width: 1rem;
27        height: 1rem;
28      }
29      > div {
30        scroll-snap-align: start;
31        flex-shrink: 0;
32        width: 29.5rem;
33        height: 17rem;
34        margin-right: 5rem;
35        border-radius: 1rem;
36
37        transform-origin: center center;
38        transform: scale(1);
39        transition: transform 0.5s;
40        position: relative;
41
42        display: flex;
43        justify-content: center;
44        align-items: center;
45      }
46      img {
47        object-fit: contain;
48        position: absolute;
49        top: 0;
50        left: 0;
51        width: 100%;
52        height: 100%;
53      }
54    }
55