Question

我现在正在使用滑块创建家庭网站。我尝试从tutorial出发，并且想添加另一张幻灯片。我认为我已经相应地修改了代码，但是它不起作用。我想念什么？

这是指向fiddle的链接。

这是我的CSS的一部分：

.slide-1 {
  background: #fbad99;
  left: 0;
}
[ ... slide 2-4 ... ]
.slide-5 {
  background: #b1a494;
  left: 400%;
}
.slider {
  display: flex;
  justify-content: flex-start;
}
.slider-content {
  width: 635px;
  padding-left: 100px;
}

.slide-radio1:checked ~ .slider-pagination .page1,
[ ... slide 2-4 ... ]
.slide-radio5:checked ~ .slider-pagination .page5 {
  width: 14px;
  height: 14px;
  border: 2px solid #ea2e49;
  background: transparent;
}

.slide-radio1:checked ~ .slider {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}
[ ... slide 2-4 ... ]
.slide-radio5:checked ~ .slider {
  -webkit-transform: translateX(-400%);
  transform: translateX(-400%);
}

.slide-radio1:checked ~ .slide-1 h2,
[ ... slide 2-4 ... ]
.slide-radio5:checked ~ .slide-5 h2,
.slide-radio1:checked ~ .slide-1 h4,
[ ... slide 2-4 ... ]
.slide-radio5:checked ~ .slide-5 h4,
.slide-radio1:checked ~ .slide-1 > img,
[ ... slide 2-4 ... ]
.slide-radio5:checked ~ .slide-5 > img {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  opacity: 1
}

Answer 1

似乎您将幻灯片5放在color: -webkit-link之外。将最后一个结束的textDecoration标签从幻灯片4的底部移至幻灯片5的末尾，所有内容将包含在滑块包装中。我只是在您的小提琴中尝试过，并且有效

将页面添加到滑块（html）

1 个答案: