请告诉我如何编辑滑块：
- 这样，当您将鼠标悬停在图像上时，其颜色会变成绿色。
- 如何制作切换幻灯片的按钮？ （如顶角所示）
- 如何改变滑块本身的宽度？ （宽度不合适）。
它应该像照片中一样：
这是我的代码：
HTML：
<section>
<h1 class="Zagolovok">Наши услуги</h1>
<div class="slider__items">
<div class="slider__item slider__item_1">
<img class="slider_1" src="img/Yslygi_1.png">
</div>
<div class="slider__item">
<img src="img/Yslygi_2_1.png">
</div>
<div class="slider__item">
<img src="img/Yslygi_3.png">
</div>
<div class="slider__item">
<img height="500px" width="418px" src="img/Yslygi_4_2.png">
</div>
</div>
CSS：
.slider__item{
width: 418px;
height: 500px;
gap: 0px;
border-radius: 10px;
opacity: 0px;
}
.slider__item_1{
max-height: 500px;
max-width: 418px;
border-radius: 10px;
}
.slider__1:hover{
background-color: #2bee4b;
}
.slider__items {
overflow-x: scroll;
overflow-y: hidden;
display: grid;
grid-template-columns: repeat(4, auto);
grid-gap: 0 30px;
padding: 30px 45px;
padding-right: 0;
}
.slider__items::-webkit-scrollbar {
/* max-width: 1372px; */
min-width: 100%;
/* width: 100%; */
height: 3px;
margin-left: 30px;
margin-right: 30px;
}
.slider__items::-webkit-scrollbar-track {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
margin-left: 45px;
margin-right: 45px;
width: 100%;
}
.slider__items::-webkit-scrollbar-thumb {
border-radius: 3px;
background-color: #121613;
outline: 2px solid #dfe5e0;
}
.Zagolovok{
font-family: Montserrat;
font-size: 48px;
font-weight: 700;
line-height: 57.6px;
text-align: left;
margin-left: 45px;
margin-top: 20px;
}
也许您可以就如何最好地做到这一点提供建议？提前致谢。这是我的结果：
你没有滑块，只有一个带有滚动条的块。
顺便说一句，卷轴本身的可定制性很差。
通过滑块，我们通常指以下“元素”：
这是Swiper滑块- 流行的滑块之一，具有非常强大的功能。
多个问题不好，但我会回答：
这样，当您将鼠标悬停在图像上时，其颜色会变成绿色。
从例子来看，除了颜色之外，还显示了一个图标。
我会添加一个单独的块，将 SVG 图标放置在中心。
该块本身具有半透明的绿色背景（很可能是另一个
mix-blend-mode属性）。最初，该块通过 隐藏opacity: 0;，但当您将鼠标悬停在幻灯片上时，将其更改为opacity: 1。这是使用设计来完成的
.parent:hover .children。如何制作切换幻灯片的按钮？ （如顶角所示）
如果您使用 Swiper 实现滑块，那么通过单独创建按钮，可以指定它们来控制滑块，有两种选择：
初始化时
new Swiper，传入参数重新分配默认的“后退/前进”箭头 -文档。它看起来像这样：
使用幻灯片翻转的方法。
如何改变滑块本身的宽度？ （宽度不合适）。
Swiper有一个Scrollbar模块，初始化时在选项中连接并根据文档进行配置
下面是可以做什么的示例。
看这里，为了清晰起见，我快速画出了一个滑块
overflow: hidden;以便它不会由于溢出而变成滚动让 y = document.querySelectorAll('.wrap').length;
看看我们总共有多少张幻灯片
如果您到达字段的末端之一，它将重置值 注意，由于配置的幻灯片（换行）的现状，有几张幻灯片如果您有任何疑问，请在评论中写下它们