質問

ユーザーが矢印をクリックして画像を切り替えることができる、画像カルーセルを作りたいと思っています。例えば

ただし、使用できるのはHTMLとCSSのみで、JavaScript（つまりjQuery）は使えません。基本的な設定だけでよく、スムーズな遷移などは必要ありません。

どのようにすればよいのでしょうか？

どのように解決するのですか？

簡単です。ラジオボタンとターゲットラベルを使用するだけです。

ラジオボタンは、カルーセルの画像のように、一度に1つしか選択できないという（必要な）動作を持っています。

デモ

div.wrap2 {
  float: left;
  height: 500px;
  width: 422px;
}
div.group input {
  display: none;
  left: -100%;
  position: absolute;
  top: -100%;
}
div.group input ~ div.content {
  border: solid 1px black;
  display: none;
  height: 350px;
  margin: 0px 60px;
  position: relative;
  width: 300px;
}
div.group input:checked ~ div.content {
  display: block;
}
div.group input:checked ~ label.previous,
div.group input:checked ~ label.next {
  display: block;
}
div.group label {
  background-color: #69c;
  border: solid 1px black;
  display: none;
  height: 50px;
  width: 50px;
}
img {
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
}
p {
  text-align: center;
}
label {
  font-size: 4em;
  margin: 125px 0 0 0;
}
label.previous {
  float: left;
  padding: 0 0 30px 5px;
}
label.next {
  float: right;
  padding: 0 5px 25px 0;
  text-align: right;
}

<div class="wrap">
  <div class="wrap2">
    <div class="group">
      <input type="radio" name="test" id="0" value="0">
      <label for="4" class="previous">&lt;</label>
      <label for="1" class="next">&gt;</label>
      <div class="content">
        <p>panel #0</p>
        <img src="http://i.stack.imgur.com/R5yzx.jpg" width="200" height="286">
      </div>
    </div>
    <div class="group">
      <input type="radio" name="test" id="1" value="1">
      <label for="0" class="previous">&lt;</label>
      <label for="2" class="next">&gt;</label>
      <div class="content">
        <p>panel #1</p>
        <img src="http://i.stack.imgur.com/k0Hsd.jpg" width="200" height="139">
      </div>
    </div>
    <div class="group">
      <input type="radio" name="test" id="2" value="2">
      <label for="1" class="previous">&lt;</label>
      <label for="3" class="next">&gt;</label>
      <div class="content">
        <p>panel #2</p>
        <img src="http://i.stack.imgur.com/Hhl9H.jpg" width="140" height="200">
      </div>
    </div>
    <div class="group">
      <input type="radio" name="test" id="3" value="3" checked="">
      <label for="2" class="previous">&lt;</label>
      <label for="4" class="next">&gt;</label>
      <div class="content">
        <p>panel #3</p>
        <img src="http://i.stack.imgur.com/r1AyN.jpg" width="200" height="287">
      </div>
    </div>
    <div class="group">
      <input type="radio" name="test" id="4" value="4">
      <label for="3" class="previous">&lt;</label>
      <label for="0" class="next">&gt;</label>
      <div class="content">
        <p>panel #4</p>
        <img src="http://i.stack.imgur.com/EHHsa.jpg" width="96" height="139">
      </div>
    </div>
  </div>
</div>

TLDR: 重要な注意事項

• 少なくとも1つの input(type="radio") は checked をデフォルトで指定しないと、カルーセル全体が非表示になります。
• 入力のラジオを隠し、ラベルを前/次のボタンとして使用します。
• を確認します。 labels が正しく前/次のラジオ入力をターゲットにしていることを確認してください (ターゲティングを行う方法については、最後のラベルのセクションを参照してください)。
• 対応する入力ラジオが :checked
• かわいい子猫の画像を使用する

説明

基本的なHTMLの構成はこんな感じです。

div#holder
    div.group
        input(type="radio")
        label.previous
        label.next
        div.content
            img
    div.group
        // ... repeat as necessary

div#holder は、すべてのコンテンツを所定の位置に保持します。次に、ラジオボタン、ラベル、画像をすべて div.group . これにより、ラジオ入力が破壊的な干渉を受けないようにします（ダジャレ）。

キーはセレクタにあります (そしてラベルも。このセクションを必ず読んでください)

まず、ラジオボタンを非表示にします-とにかく醜いので。

div.group input {
    display: none;
    position: absolute;
    top: -100%;
    left: -100%;
}

ラジオボタンをクリックする必要はありません。その代わりに、ラベルをスタイルして、ターゲット( for プロパティ) を追加し、クリックを適切なラジオ入力ブロックにリダイレクトするようにします。

ラベルの大部分は非表示にする必要があります。

div.group label {
    display: none;
}

^{(スタイリングがわかりやすいように、美的なスタイリングはすべて省略します。スタック・スニペットでより見栄えの良いバージョンを見ることができます)。}

ただし、トグルでオンになるラジオ入力の隣にあるものや :checked

div.group input:checked ~ label.previous,
div.group input:checked ~ label.next {
    display: block;
}

さらに div.content も表示されます。

div.group input:checked ~ div.content {
    display: block;
}

ただし、ラジオボタンにチェックが入っていない場合。 div.content は非表示にする必要があります。

div.group input ~ div.content {
    display: none;
    position: relative;
}

バジンガ! これでカルーセルは <ストライク 完全に になっているはずです。ラベルを正しい位置に移動してみましょう。

label.previous { float: left; }
label.next { float: right; }

そして、画像をそれぞれのdivの中で中央に配置します。

img {
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
}

最後は、ラベルの設定方法です。

<input type="radio" id="1">
<label class="previous" for="0">&lt;</label>
<label class="next" for="2">&gt;</label>

ラジオ入力に id の n は、その label.previous には for の属性は (n - 1) % M と label.next には for の属性は (n + 1) % M で、ここで M はカルーセルに含まれる画像の数です。

追加

Jade（または他のテンプレートエンジン）を使っている場合、このように単純なforループで設定することができます。

div.wrap2
    - var imgs = [[200, 286], [200, 139], [140, 200], [200, 287], [96, 139]];
    - for (var i = 0; i < imgs.length; i++)
        div.group
            input(type="radio" name="test" id="#{i}" value="#{i}" checked="#{input == 3}")
            label(for="#{(i - 1 + imgs.length) % imgs.length}").previous &lt;
            label(for="#{(i + 1) % imgs.length}").next &gt;
            div.content
                p panel ##{i}
                img(src="http://placekitten.com/g/#{imgs[i].join('/')}"
                    height="#{imgs[i][1]}"
                    width="#{imgs[i][0]}"
                )