Carousel indicators WITHOUT bootstrap and WITHOUT any function

Question

I've seen a LOT of examples for making carousel indicators for a pictures gallery. But all of them were using bootstrap or radio buttons (for jumping to another pic). I don't want that.

Given the code below, is there a way to show the user which of the 3 pictures is he/she currently viewing? I don't want the user to be able to click the indicator to jump to another picture. I just want to highlight the indicator so he/she knows "ok then, I'm on the second picture".

I want to use this thing ONLY on mobile and tablet, then with media queries I will change it on desktop.

NOTE: I am a beginner, I know how to work with HTML and CSS only...I'm sure there are plenty of ways to do that using JS...but I wouldn't understand them.

Here is the page in question so you can see how it behaves. IMPORTANT: Inspect it with mobile simulator to see the behavior, 'cause the code snippet won't work properly here.

.sezionecane {
  margin-top: 1.5em;
}

.nomecane {
  text-align: center;
  margin-bottom: .5em;
}

.immaginicane {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  margin-bottom: 1em;
}

.immaginicane::-webkit-scrollbar {
  display: none;
}

.immaginicane > img {
  scroll-snap-align: start;
}

<div class="sezionecane">
      <h3 class="nomecane">Osso</h3>

      <div class="immaginicane">
          <img id="foto1" src="cani/foto1.jpg" width="100%" alt="foto1">
          <img id="foto2" src="cani/foto2.jpg" width="100%" alt="foto2">
          <img id="foto3" src="cani/foto3.jpg" width="100%" alt="foto3">
      </div>

      <p class="testocane">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi soluta, dolore! Sed aliquid assumenda exercitationem dolores numquam, at rerum quia, ducimus impedit consequuntur! Rem illo debitis beatae quas modi similique nemo, minima atque natus laborum. Aperiam, rerum et nesciunt ullam?</p>
    </div>

Answer 1

Not solved (currently). You can click #foto1 and it'll change the color of #foto2 (or #foto3) but not previous element nor what is outside its parent like the dots. Apart of that, it does looks fine in mobile.

The ~.dots#dot-s are probably needed to be placed inside of .immaginicane, but that does’t seems to work.

<style>
.sezionecane{
margin-top: 1.5em;
}

.nomecane{
text-align: center;
margin-bottom: .5em;
}

.immaginicane{
display: flex;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
margin-bottom: 1em;
z-index: 10;
}

.immaginicane::-webkit-scrollbar{
display: none;
}

.immaginicane > img{
scroll-snap-align: start;
}

#foto1, #foto2, #foto3{
height: 55vh;width: 100vw;
display: block;position: relative;
}

#foto1::before{
content: "";
height: 0px;width: 0px;
top: 46%;right: 10px;
display: block;position: absolute;
opacity: 0.7;
border: 10px solid transparent;
border-left: 10px solid #72DAFF;
}

#foto1::after{
content: "foto 1";
color: #72DAFF;
top: 6px;left: 12px;
display: block;position: absolute;
opacity: 0.7;
}

#dots{
width: 100%;height: 12px;
display: flex;position: relative;flex-direction: row;
align-items: center;justify-content: center;
z-index: 11;
}

.dot{
background-color: #EEE;
width: 10px;height: 10px;
margin-right: 5px;margin-left: 5px;
display: block;position: relative;
border-radius: 50%;
}

#foto1:hover~#foto2{
background-color: #72DAFF;
}
#foto2:hover~#dot-2{
background-color: #72DAFF;
}
#foto3:hover~#foto-2{
background-color: #72DAFF;
}
</style>
<div class="sezionecane">
<h3 class="nomecane">Osso</h3>

 <div class="immaginicane">
<img id="foto1" src="" width="100%" alt="foto1">
<img id="foto2" src="" width="100%" alt="foto2">
<img id="foto3" src="" width="100%" alt="foto3">
 </div>

<div id="dots"><div class="dot" id="dot-1"></div><div class="dot" id="dot-2"></div><div class="dot" id="dot-3"></div></div>

<p class="testocane">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi soluta, dolore! Sed aliquid assumenda exercitationem dolores numquam, at rerum quia, ducimus impedit consequuntur! Rem illo debitis beatae quas modi similique nemo, minima atque natus laborum. Aperiam, rerum et nesciunt ullam?</p>

</div>