我将如何构建一个滑块，其中项目降低了不透明度，除了用户当前是一个项目?

Question

我对滑块的想法的图像

我对滑块的想法是始终显示 3 个项目。左侧和右侧的大多数将具有较低的不透明度，而用户当前所在的那个(居中的那个(将是完全不透明度并给出阴影。

我知道如何创建一个滑块，所以它可以在所有项目中滑动，但是，我不确定如何设置它，以便一旦项目居中，它将不再具有不透明度并获得阴影。

Answer 1

.outer {
height: 80px;
overflow: hidden;
}
.slider {
position: relative;
left: -40%;
width: calc(180%);
}
.slider>div {
box-sizing: border-box;
float: left;
line-height: 30px;
width: 30%;
text-align: center;
padding: 15px 0px;
margin: 10px;
border: 1px solid gray;
}
.slider>div {
opacity: 0.6;
box-shadow: none;
}
.slider .centered {
opacity: 1;
box-shadow: 2px 2px 2px rgba(0,0,0,.3);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="slider">
<div>left visible content</div>
<div class="centered">center content</div>
<div>right visible content</div>
</div>
</div>

我相信这可能就是你要找的。如果您已经有了滑块并且可以用类识别中间的滑块，那么它只是 css。