轮播指标无引导且无任何功能

问题描述

我已经看到了很多为图片库制作轮播指标的示例。但是他们所有人都使用了引导程序或单选按钮（用于跳转到另一张图片）。我不要。

给出以下代码，是否可以向用户显示他/她当前正在查看3张图片中的哪张？我不希望用户能够单击指示器跳到另一张图片。我只想突出显示指示器，以便他/她知道“好吧，我在第二张照片上。”

我只想在移动设备和平板电脑上使用此功能，然后通过媒体查询在台式机上进行更改。

注意：我是一个初学者，我只知道如何使用HTML和CSS ...我敢肯定，有很多方法可以使用JS来做到这一点...但我不会理解。

这里是page in question，因此您可以看到它的行为。 重要：使用移动模拟器对其进行检查以查看其行为，因为此处的代码段无法正常工作。

.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>

解决方法

（目前尚未解决）。您可以单击＃foto1，它将更改＃foto2（或＃foto3）的颜色，但不会更改以前的元素，也不会更改其父级（如点）之外的颜色。除此之外，它在移动设备中看起来还不错。

〜.dots＃dot-s可能需要放在.immaginicane内，但这似乎行不通。

<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>