仅css或css3滑块
仅css或css3滑块
提问于 2018-07-21 02:37:10
大家好，我需要多个滑块只与css/html我不应该使用javascript或jquery，请有人能帮助我？
我应该显示3张图片，然后在箭头上显示另一张图片(如图所示)
.partnersImg{
width: 100%;
}
.nextIcon, .prevIcon{
width: 50px;
} <div class="patertnerSlider">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcStFrWoQm1J07yYet23ECYxiKd55MWRbU9r19h64ROUOaeQ9FQB" class="prevIcon">
<br>
<img src="https://image.freepik.com/iconen-gratis/naar-de-volgende-pagina-symbool_318-35629.jpg" class="nextIcon">
<div class="mainSlider">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRoLohLLjZL3np_ey31ECbmOg7ayJsvZTz92JUo0TPlL4ADfUzQ" class="partnersImg">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRoLohLLjZL3np_ey31ECbmOg7ayJsvZTz92JUo0TPlL4ADfUzQ" class="partnersImg">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRoLohLLjZL3np_ey31ECbmOg7ayJsvZTz92JUo0TPlL4ADfUzQ" class="partnersImg">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRoLohLLjZL3np_ey31ECbmOg7ayJsvZTz92JUo0TPlL4ADfUzQ" class="partnersImg">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRoLohLLjZL3np_ey31ECbmOg7ayJsvZTz92JUo0TPlL4ADfUzQ" class="partnersImg">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRoLohLLjZL3np_ey31ECbmOg7ayJsvZTz92JUo0TPlL4ADfUzQ" class="partnersImg">
</div>
</div>
回答 1
Stack Overflow用户
发布于 2018-07-21 03:23:22
也许您可以从this article from 2015中获得一些灵感。
我没有全部看过，但我看过的两个建议是：
如果你只想要‘点击’来导航滑块，你可以使用‘- like’功能，该功能依赖于点击内部链接(
- )，它会修改url，并通过显示带有相应ID的元素来显示正确的'tab‘。你可以使用像this example's Demo 1.
这样的关键帧来自动转换
下面的代码来自选项2的源代码，请访问网站查看其余部分，太多了，无法回答！它是动画和关键帧相互淡入的组合。
background-image: url(../images/banner-1-sm.jpg);
animation: slider-sm ease-in-out 30s both infinite;
...
animation: fade-out 9s infinite both;
background-image: url(../images/banner-2-sm.jpg);
...
@keyframes fade-out {
33% {
opacity: 1; }
66% {
opacity: 0; } }
...
@keyframes slider-sm {
0% {
background-image: url(../images/banner-1-sm.jpg); }
33% {
background-image: url(../images/banner-2-sm.jpg); }
66% {
background-image: url(../images/banner-3-sm.jpg); }
100% {
background-image: url(../images/banner-1-sm.jpg); } }@zgood我想知道同样的事情(如果它在纯CSS中是可能的)。这似乎是有局限性的，但令人惊讶的是，你可以做到！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51448565
复制相关文章
相似问题