Html 在每张幻灯片上插入文本

我做了一个简单的幻灯片。我想在每张幻灯片上插入一段文字。通过单击每个按钮（幻灯片1、幻灯片2等），可以显示特定文本。（请不要使用javascript）。“slider side”类包含应显示的所有文本

显示的文本应放在照片上

我希望最终结果如下所示

滑块{
宽度：100%；
高度：自动；
浮动：对；
溢出：隐藏；
}
.滑块img{
浮动：左；
排名：0；
左：0；
过渡：不透明度0.5s减缓；
不透明度：0；
宽度：0%；
高度：自动；
}
.滑块输入[type=“radio”]{
显示：无；
}
.滑块输入：选中+img{
不透明度：1；
z指数：1；
宽度：100%；
}
.滑块.控件{
位置：相对位置；
排名：0；
左：0；
z指数：2；
宽度：100%；
高度：30px；
浮动：左；
}
.滑块标签{
背景：rgba（0,0,0,0.8）；
颜色：#fff；
填充：10px；
显示：内联块；
光标：指针；
}

标题1
副标题2
标题2
副标题2
标题3
副标题3
幻灯片1
幻灯片2
幻灯片3

您可以通过在

div

中包装

复选框

和一些样式来实现所需的结果

滑块{
宽度：100%；
高度：自动；
浮动：对；
溢出：隐藏；
位置：相对位置；
}
.滑块img{
浮动：左；
排名：0；
左：0；
过渡：不透明度0.5s减缓；
不透明度：0；
宽度：0%；
高度：自动；
}
.滑块输入[type=“radio”]{
显示：无；
}
.滑块输入：选中+img{
不透明度：1；
z指数：1；
宽度：100%；
}
.滑块输入：选中~.滑块侧{
显示：块；
}
.滑块.控件{
位置：相对位置；
排名：0；
左：0；
z指数：2；
宽度：100%；
高度：30px；
浮动：左；
}
.滑块标签{
背景：rgba（0,0,0,0.8）；
颜色：#fff；
填充：10px；
显示：内联块；
光标：指针；
}
.滑块侧{
位置：绝对位置；
右：0；
背景：rgba（255，255，255，0.1）；
颜色：#fff；
排名：0；
底部：0；
身高：100%；
填充：100px；
显示：无；
}
.滑块侧边.标题{
显示：块；
字体大小：30px；
}

标题1
副标题1
标题2
副标题2
标题3
副标题3
幻灯片1
幻灯片2
幻灯片3

非常感谢，可能是重复的。你是最棒的♥乐意帮忙：）