Добавление страницы в слайдер (html)

Question

Я сейчас занимаюсь созданием домашнего сайта с помощью ползунков.Я попытался перейти с учебника и хочу добавить еще один слайд.Я думаю, что я изменил код соответственно, но он не будет работать.Что мне не хватает?

Вот ссылка на 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 за пределами <div class="css-slider-wrapper">.Переместите этот последний закрывающий тег </div> с нижней части слайда 4 до конца слайда 5, и все будет содержаться в оболочке слайдера.Я только что попробовал это в твоей скрипке, и это сработало