Bir resim bir kullanıcı görüntüleri arasında geçiş yapabilir, ok tıklayarak carousel yapmak için arıyorum. Örneğin:

Ancak, sadece HTML ve CSS—JavaScript (ve bu nedenle) bir WordPress kullanmak kullanabilirim. Ben sadece temel kurulum; yumuşak geçişler ve benzeri gerekli değildir.

Nasıl bu gerçekleştirerek hakkında gidebilir miyim?

Bu kadar kolay! Sadece radyo düğmeleri ve hedef etiketler.

Radyo düğmeleri sadece herhangi bir zaman—sadece bizim carousel resim gibi seçilmiş olması için izin (gerekli) davranışı var.

Demo

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"><</label>
      <label for="1" class="next">></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"><</label>
      <label for="2" class="next">></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"><</label>
      <label for="3" class="next">></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"><</label>
      <label for="4" class="next">></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"><</label>
      <label for="0" class="next">></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: Önemli notlar

• 16 ** *en az bir 17* varsayılan olduğundan emin olun, yoksa bütün carousel gizli kalacaktır.
• Giriş radyo düğmeleri gizlemek ve bir sonraki bir önceki gibi etiketler kullanın
• labels doğru önceki/sonraki radyo giriş (etiketler hedefleme yapmak için nasıl sonunda bölüm) hedef emin olun
• İlgili giriş radyo :checked bir resim göstermek
• Sevimli yavru kedi resimleri kullanın

Açıklama

Temel HTML yapısı gibi görünmelidir:

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

div#holder yerde bizim içeriğin tüm düzenleyecek. Sonra, bütün div.group altında radyo düğmeleri, etiketler ve görüntüler grubumuz ederiz. Bu radyo bizim giriş yıkıcı girişim (kelime oyunu) muzdarip yok emin olur.

Anahtar seçiciler (ve bu bölümü okumak için etiketleri—emin olun)

İlk olarak, bizim radyo saklanırız düğmeleri—onlar çirkin zaten.

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

Hiç radyo düğmeleri tıklatın gerek kalmayacak. Bunun yerine, uygun radyo girdi bloğu için tıklayın onlar yönlendirmek böylece, etiketler ekleyin ve hedeflerimiz (for özellikler) tarzı ederiz.

Bizim etiket en gizli olmalıdır:

div.group label {
    display: none;
}

^{(Stil anlamak daha kolay hale getirmek için estetik şekillendirme ihmal edeceğim. Bu daha iyi görünümlü sürümü parçacığı yığın görebilirsiniz.)}

Bu radyo bir giriş yanındaki hariç yükseğe, ya da :checked

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

Buna ek olarak, kontrol bir giriş aşağıdaki div.content de görüntülenir:

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

Radyo düğmesi div.content işaretli değil, ancak gizli olmalıdır:

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

Bazinga! Şimdi bizim carousel olmalıdırtam olarakbiraz çirkin de olsa. çoğunlukla işlevsel, Doğru pozisyon için etiketimiz geçelim:

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

Ve kendi divs içinde bizim resimleri merkezi:

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

Son adım etiketleri ayarlayın:

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

Not nasıl, belirli bir radyo girişi id n label.previous bir for nitelik (n - 1) % M label.next bir for nitelik (n 1) % M nereye M sayı görüntüleri atlıkarınca.

Ekstra

Eğer Jade (veya başka bir şablon motoru) kullanıyorsanız, bu gibi bir döngü için basit bir ile ayarlayabilirsiniz:

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 <
            label(for="#{(i   1) % imgs.length}").next >
            div.content
                p panel ##{i}
                img(src="http://placekitten.com/g/#{imgs[i].join('/')}"
                    height="#{imgs[i][1]}"
                    width="#{imgs[i][0]}"
                )