请告诉我如何编辑滑块:
- 这样,当您将鼠标悬停在图像上时,其颜色会变成绿色。
- 如何制作切换幻灯片的按钮? (如顶角所示)
- 如何改变滑块本身的宽度? (宽度不合适)。
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;
看看我们总共有多少张幻灯片
如果您到达字段的末端之一,它将重置值 注意,由于配置的幻灯片(换行)的现状,有几张幻灯片如果您有任何疑问,请在评论中写下它们