请告诉我如何编辑滑块:
- 这样,当您将鼠标悬停在图像上时,其颜色会变成绿色。
- 如何制作切换幻灯片的按钮? (如顶角所示)
- 如何改变滑块本身的宽度? (宽度不合适)。
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;
}