在每张幻灯片上插入文本

Question

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

显示的文字应该放在照片上。

我想要如下图的最终结果

I want the final result like this

.slider {
    width: 100%;
    height: auto;
    float: right;
    overflow: hidden;
}

.slider img {
    float: left;
    top: 0;
    left: 0;
    transition: opacity 0.5s ease-out;
    opacity: 0;
    width: 0%;
    height: auto;
}

    .slider input[type="radio"] {
        display: none;
    }

.slider input:checked + img {
    opacity: 1;
    z-index: 1;
    width: 100%;
}

    .slider .controls {
        position: relative;
        top: 0;
        left: 0;
        z-index: 2;
        width: 100%;
        height: 30px;
        float: left;
    }

    .slider label {
        background: rgba(0,0,0,0.8);
        color: #fff;
        padding: 10px;
        display: inline-block;
        cursor: pointer;
    }

    

    <div class="slider">
        <input type="radio" id="slide1" name="radio" checked>
        <img src="http://xup.ir/images/39359184745003103315.jpg" />
        <div class="slider-side">
            <span class="title">title1</span>
            <span class="subTitle">subTitle2</span>
        </div>

        <input type="radio" id="slide2" name="radio">
        <img src="http://xup.ir/images/70934477928759834031.jpg">
        <div class="slider-side">
            <span class="title">title2</span>
            <span class="subTitle">subTitle2</span>
        </div>

        <input type="radio" id="slide3" name="radio">
        <img src="http://xup.ir/images/13016878203236126642.jpg">
        <div class="slider-side">
            <span class="title">title3</span>
            <span class="subTitle">subTitle3</span>
        </div>


        <div class="controls">
            <label for="slide1">slide1</label>
            <label for="slide2">slide2</label>
            <label for="slide3">slide3</label>
        </div>
    </div>

Answer 1

您可以通过将 checkboxes 包装在 div 和一些样式中来获得所需的结果

.slider {
  width: 100%;
  height: auto;
  float: right;
  overflow: hidden;
  position: relative;
}

.slider img {
  float: left;
  top: 0;
  left: 0;
  transition: opacity 0.5s ease-out;
  opacity: 0;
  width: 0%;
  height: auto;
}

.slider input[type="radio"] {
  display: none;
}

.slider input:checked+img {
  opacity: 1;
  z-index: 1;
  width: 100%;
}

.slider input:checked~.slider-side {
  display: block;
}

.slider .controls {
  position: relative;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 30px;
  float: left;
}

.slider label {
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 10px;
  display: inline-block;
  cursor: pointer;
}

.slider-side {
  position: absolute;
  right: 0;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  top: 0;
  bottom: 0;
  height: 100%;
  padding: 100px;
  display: none;
}

.slider-side .title {
  display: block;
  font-size: 30px;
}

<div class="slider">
  <div>
    <input type="radio" id="slide1" name="radio" checked>
    <img src="http://xup.ir/images/39359184745003103315.jpg" />
    <div class="slider-side">
      <span class="title">title1</span>
      <span class="subTitle">subTitle1</span>
    </div>
  </div>
  <div>
    <input type="radio" id="slide2" name="radio">
    <img src="http://xup.ir/images/70934477928759834031.jpg">
    <div class="slider-side">
      <span class="title">title2</span>
      <span class="subTitle">subTitle2</span>
    </div>
  </div>
  <div>
    <input type="radio" id="slide3" name="radio">
    <img src="http://xup.ir/images/13016878203236126642.jpg">
    <div class="slider-side">
      <span class="title">title3</span>
      <span class="subTitle">subTitle3</span>
    </div>


    <div class="controls">
      <label for="slide1">slide1</label>
      <label for="slide2">slide2</label>
      <label for="slide3">slide3</label>
    </div>
  </div>
</div>